// 动画回调: 当动画启动和终止时可以触发
// 在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}`); }