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

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 Sunday, 22 November 2015 20:25:21 UTC