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
<>  <>

Curator of Web Animation Weekly <>

*Speaking & Workshops in 2015*

   - Oct 28 –30 Future of Web Design, San Francisco, Motion Design with CSS
   - Nov 02 –04 View Source Conf, Portland <>
   - Nov 14 Form over Function, Manila, Philippines

On Sun, Nov 22, 2015 at 12:25 PM Zacqary Adam Xeper <> 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).

Received on Tuesday, 24 November 2015 06:31:45 UTC