Angular 2 animation ended callback function

Question

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'))
])
]

Answer 1

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%;
    }
}