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.
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 implementwindow.onanimationend
but at the same time dispatches theanimationend
event and notwebkitAnimationEnd
.
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.