Angular 2动画结束回调函数

Question

基于Angular 2的动画示例，有没有办法指定动画结束时的回调函数？

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

您可以非常轻松地管理动画，而无需依赖 Angular 动画。 Angular5 现在支持大多数回调方法，包括“animationend”回调。 这是一个基本示例。一旦动画被触发，'anim-slide'，它是保存动画的 css 类附加到 DOM。这是通过使用“animClass”来完成的，它是一个常规的 Angular 分量变量。动画完成后，通过清空“animClass”变量从 DOM 中删除 css 类

<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 类

.anim-slide{
    animation-duration: 3s;
    animation-name: slidein;
}
  
@keyframes slidein {
    from {
      margin-left: 100%;
      width: 300%; 
    }
  
    to {
      margin-left: 0%;
      width: 100%;
    }
}