Based on the animation example for Angular 2, is there a way to specify a callback function when the animation ends?
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'))
])
]
You can manage animation pretty easily without relying on angular animation. Angular5 now supports most of the callback methods including 'animationend' callback. Here is a basic example. Once animation is triggered, 'anim-slide', which is the css class that holds the animation is attached to the DOM. This is done by by using 'animClass' which is a regular angular component variable. Once the animation is done css class is removed from the DOM by emptying 'animClass' variable
<div (click)="animClass='anim-slide'" >
<i class="far fa-bell"></i>
</div>
<div class="value" [ngClass]="animClass" (animationend)="animClass=''">
<div>some text that would slide in</div>
</div>`
CSS class for reference
.anim-slide{
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}The web animation API specifies animationstart and animationend events, but it seems Angular 2 applies animations in a way that makes the events inaccessible.
I have tried grabbing animated elements with ViewChild and applying event listeners (both directly and with Renderer), but the callbacks are never called.
What you can do is specify a timeout when you actually initiate the animation state change that calls a callback after a length of time equal to the length of the transition.
startAnimation() {
this.hero.state = 'active';
setTimeout(() => {
//Do something after the animation.
}, 100);
}
It's a little unwieldy because you have to change the transition and the timeout delay if you want to change the animation timing, but it works well enough. I tried something today where at the end of a translation animation, I immediately switched to a static animation state (with a 0ms transition) and applied a static translation with the Renderer at the same time. It worked smoothly without any jumps or hiccups.
It's now supported as mentioned here: https://angular.io/docs/ts/latest/guide/animations.html#!#animation-callbacks
This feature seems to be implemented since 2.0.0-rc.6 (2016-08-31).
For example: If you have a trigger called 'flyInOut' you can simply add this to your template code:
<div (@flyInOut.start)="animationStarted($event)"
(@flyInOut.done)="animationDone($event)"></div>
The event (AnimationTransitionEvent from the core) provides useful information about the triggered state. (e.g. fromState and toState).
Unfortunately there is now way you can receive events about the animation progress (like @yourTrigger.animate).
This is not yet supported.
There is an open issue See https://github.com/angular/angular/issues/10304 and a pull request https://github.com/angular/angular/pull/10360 to support this use case.
