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.

Writing reusable animations

Writing reusable animations - Angular Tutorial

From the course: Angular: Animations

Start my 1-month free trial

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…

Contents