From the course: Angular: Animations
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
Writing reusable animations - Angular Tutorial
From the course: Angular: Animations
Writing reusable animations
- [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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
Self-contained component animation6m 43s
-
Writing reusable animations5m 25s
-
Animation input parameters3m 58s
-
Configuring router animation6m 53s
-
Selecting items with a query6m 20s
-
Using Stagger within an animation1m 37s
-
Challenge: Per-page router animations23s
-
Solution: Per-page router animations2m 1s
-
-
-
-