From the course: Angular: Animations

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Animation callback functions

Animation callback functions - Angular Tutorial

From the course: Angular: Animations

Start my 1-month free trial

Animation callback functions

“

- [Instructor] Angular allows us to take advantage of animation events, broadcast when an animation begins and ends. We can make use of this functionality via animation callbacks. In addition to monitoring the phaseName, triggerName, fromState, and toState involved, we are also provided the totalTime, defining the actual time of the animation in question. So, to do this, make sure you're in the AnimboxComponent because these properties are defined in the component where the animations are actually taking place and I'm going to paste in a few attributes here. So, right after our information about our changeState, we're going to set changeState.start and set that equal to a method called animationBegin, passing in the event that takes place here. We'll also have one changeState.done. Here, we'll pass that through the function called animationEnd and once again pass in the event itself. Let's go ahead and define those functions now. What we'll do is scroll down, right below input inside…

Contents