Search code examples
angularjsng-animate

Does ngAnimate look at CSS classes to determine animation length, or does it detect the `animationend` event?


Pretty much what the title says.

When adding/removing content from the DOM, ngAnimate will leave the element in the DOM until the animation is complete. I can't tell if it is looking at any transition-duration or animation-duration CSS properties, or if it is listening for the animationend event to destroy a leaving element.


Solution

  • This comment at the top of the angular animate js source indicates it relies on the onanimationend event:

    If unprefixed events are not supported but webkit-prefixed are, use the latter. Otherwise, just use W3C names, browsers not supporting them at all will just ignore them. Note: Chrome implements window.onwebkitanimationend and doesn't implement window.onanimationend but at the same time dispatches the animationend event and not webkitAnimationEnd.

    Although, if you read further down, it seems they are just using that event (and every other animation-related event) to check against their own internal timer they get by parsing the css styles to see if the animation is completed.

    It seems the flow goes something like this: 1) search css for how long the animation should last, 2) register all animation events to a single onAnimationProgress function, 3) when onAnimationProgess is called, test if the event time is the same as their calculations say it should be, 4) mark complete and trigger close.