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

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

Received on Tuesday, 8 December 2015 23:20:26 UTC