angular+ 动画——动画回调函数

// 动画回调： 当动画启动和终止时可以触发
// 在html，通过@trigger.start 和 @trigger.done （trigger为触发器名称, $event将传递动画事件） 来触发动画开始和动画结束的回调函数；

 

// html

<div [@openClose]="isOpen ? 'open' : 'closed'"
  (@openClose.start)="onAnimationEvent($event)"
  (@openClose.done)="onAnimationEvent($event)"
  class="open-close-container">  
  <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
</div>

// ts  

onAnimationEvent ( event: AnimationEvent ) {
 
    console.warn(`Animation Trigger: ${event.triggerName}`);

    console.warn(`Phase: ${event.phaseName}`);

    console.warn(`Total time: ${event.totalTime}`);

    console.warn(`From: ${event.fromState}`);

    console.warn(`To: ${event.toState}`);

    console.warn(`Element: ${event.element}`);
  }