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 < [email protected]> 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). >
