Before this lesson, you’ve been writing all of the actual animations as needed—even though many share very similar properties. It is completely possible to write reusable animations in Angular 4.2 and above, and that is what you are going to do now. All you need to do to employ a reusable animation is to invoke useAnimation() and pass in the reference to the particular animation you desire.
- [Narrator] Previous to this point we've been writing…all of our actual animations as needed.…Even though many share very similar properties.…It's completely possible to write reusable animations…in angular 4.2 and above and that is what…we are going to do now.…The first thing we'll do is…create a file called animations.ts…We'll create this within our app folder.…So new file, animations.ts and then we need…to paste some stuff in here.…
So from our snippets file I'm going to paste in…this snippet which is going to go ahead…and import animate, animation,…and style from angular/animations.…What were going to do is export a variable,…I've named it fade animation.…This is set equal to an animation…and this animation has different style attributes.…
The capacity being zero, and we want…to preform an animation upon it.…So we are going to animate this animation is going to last…for a duration of 800 milliseconds…with a 300 millisecond delay and an ease of type in and out.…We want to adjust the style so the capacity…goes from zero to one.…
- 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.