Angular Keyframe Animations

Angular Keyframe Animations Triggers

Remember when we imported a trigger function up top? The trigger Angular Keyframe Animations function is the starting point of each unique animation.

The first argument accepts the name of the animation, and the second argument accepts all of the other functions that we imported.

So, within the animations property of the component decorator, we add:

animations: [
trigger(‘myAwesomeAnimation’, [

]),
]

Notice the comma after the trigger function? That’s there so that you can define multiple animations, each with unique names defined within the first argument.

Next up are Angular Keyframe Animations states.
Angular Keyframe Animations States & Styles

The state function allows you to define different states that you can call and transition between. The first argument accepts a unique name, and the second argument accepts the style function.

The style function allows you to apply an object with web Angular Keyframe Animations property names and associated values.

So, expanding on our previous example:

animations: [
trigger(‘myAwesomeAnimation’, [
state(‘small’, style({
transform: ‘scale(1)’,
})),
state(‘large’, style({
transform: ‘scale(1.2)’,
})),
]),
]

We have 2 different states where the scale property is going from a default size of 1, to 1.2. Next up is the transition function.

 

IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course and get ahead.

• Practice Test for Angular4
• Govt Certification in Angular 4
• Blog posts on Angular 4 and Web Development

Back to Angular 4 Tutorial Main Page