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

I've often thought it would be nice if there was a meta selector for
"detached" so that each author didn't have to create their own custom
property.  If there were such a meta selector then the existing transition
syntax for CSS would be sufficient to create entry and exit transitions as
elements were attached and detached.

Cheers,

- Kris

On Tue, Dec 8, 2015 at 3:19 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:

> On Mon, Nov 23, 2015 at 10:30 PM, Rachel Nabors <rachelnabors@gmail.com>
> wrote:
> > 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)
>
> Right, but the "enter animation" is also basically an enter
> transition.  The CSS animation syntax is explicitly intended for
> animations that play continuously while the element is in some state;
> it just so happens that it's fairly easy to tweak things so that an
> animation plays only once and then goes quiet, simulating something
> that happens on "entrance" to the state.
>
> If we feel like it's important to do this without JS, then we need to
> do it *properly*, not just layer further hacks over the already-abused
> Animation syntax.  I put together a proposal for that a few years ago,
> documented at <http://www.xanthir.com/b4LH0>.  In short, you'd use
> some custom property to track your "state", then use a rule like:
>
> @transition selector > for.the-element {
>   over: --foo;
>   from: the-state;
>   to: *;
>   animation: foo-animation 1s;
> }
>
> And now, anytime the --foo property changes from "--foo: the-state;"
> to anything else, it'll fire the animation.
>
> ~TJ
>
>