Angular Simple Animations

You can build a angular simple animations that transitions an element between two states driven by a model attribute.

Angular Simple Animations can be defined inside @Component metadata.

hero-list-basic.component.ts

import {
Component,
Input
} from ‘@angular/core’;
import {
trigger,
state,
style,
animate,
transition
} from ‘@angular/animations’;

With these, you can define an angular simple animation trigger called heroState in the component metadata. It uses angular simple animations to transition between two states: active and inactive. When a hero is active, the element appears in a slightly larger size and lighter color.
hero-list-basic.component.ts (@Component excerpt)

animations: [
trigger(‘heroState’, [
state(‘inactive’, style({
backgroundColor: ‘#eee’,
transform: ‘scale(1)’
})),
state(‘active’, style({
backgroundColor: ‘#cfd8dc’,
transform: ‘scale(1.1)’
})),
transition(‘inactive => active’, animate(‘100ms ease-in’)),
transition(‘active => inactive’, animate(‘100ms ease-out’))
])
]

In this example, you are defining angular simple animation styles (color and transform) inline in the angular simple animation metadata.

Now, using the [@triggerName] syntax, attach the animation that you just defined to one or more elements in the component’s template.
hero-list-basic.component.ts (excerpt)

template: `
<ul>
<li *ngFor=”let hero of heroes”
[@heroState]=”hero.state”
(click)=”hero.toggleState()”>
{{hero.name}}
</li>
</ul>
`,

Here, the animation trigger applies to every element repeated by an ngFor. Each of the repeated elements animates independently. The value of the attribute is bound to the expression hero.state and is always either active or inactive.

With this setup, an animated transition appears whenever a hero object changes state.

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