Re: [css3-animations] Declaring an animation to trigger when element is detached from the DOM

I see the need. I would argue that this would be more of an
"exit-transition" than exit-animation, though: fires once and describes how
values should change (upon application and in accordance with :detached)


[image: photo]
*Rachel Nabors*
Web Animation Engineer
w:rachelnabors.com
<http://twitter.com/rachelnabors>  <http://dribbble.com/rachelthegreat>
<http://plus.google.com/u/0/+RachelNabors>
<http://linkedin.com/in/rachelnabors>
------------------------------

Curator of Web Animation Weekly <http://www.webanimationweekly.com>

*Speaking & Workshops in 2015*

   - Oct 28 –30 Future of Web Design, San Francisco, Motion Design with CSS
   workshop
   <https://futureofwebdesign.com/san-francisco-2015/schedule/workshops/2068>
   - Nov 02 –04 View Source Conf, Portland <https://viewsourceconf.org/>
   - Nov 14 Form over Function, Manila, Philippines
   <http://www.formfunctionclass.com/>


On Sun, Nov 22, 2015 at 12:25 PM Zacqary Adam Xeper <
zacqary.xeper@datadoghq.com> wrote:

> Enter animations can be declared with CSS very easily, using:
>
> animation: appear-animation 1s ease;
> animation-fill-mode: forwards;
>
> It's not possible to do the opposite with pure CSS: declaring an animation
> that should play when an element leaves the DOM.
>
> This behavior can be achieved with JavaScript — notably in the
> ng-ReactCSSTransition library (and I think ng-animate), which on a "this
> element should exit" call, apply a special "exit" class to an element with
> a transition-duration, wait for the transitionEnd, and then detach the DOM
> node. You could probably achieve something similar in a detachedCallback of
> a web component.
>
> But should this require JavaScript to achieve?
>
> I wonder if this could be achieved with a new property, exit-animation,
> which is like animation but it can't take an infinite repeat argument. Or a
> :detached pseudoclass, which would delay the detachment of any nodes it's
> applied to if it has an animation or transition defined (which would make
> it easier to use either animation or transition when an element exits).
>