Angular Animation Callbacks
Sometimes you might want to trigger code when an animation is completed. In this example, we create an event handler to console log the animation start and done events.
logAnimation($event) {
console.log(`${this.position} animation ${$event.phaseName}`)
}
In the template, we can fire the event handler when the animation sends of the start and done events.
<img [src]=”photoUrl”
[@photoState]=”position”
(@photoState.start)=”logAnimation($event)”
(@photoState.done)=”logAnimation($event)”>
Angular Animation Callbacks are great for orchestrating a complex sequence of animations throughout your app.
animated list with query and stagger in angular 4
A common UX feature is to sequentially animate a list of items. It would be cumbersome to define a bunch of delayed animations, which is the the problem solved by query and stagger. Query allows you select HTML elements within an animation, while stagger will build the delay interval based on the size of a collection. In this example, we query all img tags and translate them off the page, then animate them within stagger to automatically create the shutter-like effect.
animations: [
trigger(‘photosAnimation’, [
transition(‘* => *’, [
query(‘img’,style({ transform: ‘translateX(-100%)’})),
query(‘img’,
stagger(‘600ms’, [
animate(‘900ms’, style({ transform: ‘translateX(0)’}))
]))
])
])
]
IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course and get ahead.
Back to Angular 4 Tutorial Main Page 
