Angular allows the user to take advantage of animation events broadcast when an animation begins and ends. You can make use of this functionality via animation callbacks. In addition to monitoring the phaseName, triggerName, fromState, and toState involved, you are also provided the totalTime, which defines the actual time of the animation in question.
- [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 our class definition…and I'm going to paste in a nice snippet here…
- Installing the Angular CLI
- Creating a new project
- Verifying the animations package
- Configuring project routes
- Animating components
- Triggering animation between states
- Stepped and parallel animation
- Writing reusable animations
- Animating individual items with query and stagger
- Animating an existing Angular project
Skill Level Intermediate
1. Getting Ready to Animate
2. Enabling Angular Animations
3. Angular Animation Basics
4. Advanced Angular Animation
5. Animating an Existing Interface
6. Package for Distribution
Building the project1m 56s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.