检测css关键帧何时完成 - Angular答案

【问题标题】：detect when css keyframe is done - Angular检测css关键帧何时完成 - Angular
【发布时间】：2018-09-26 08:01:41
【问题描述】：

我有一个持续一秒钟的动画，我有一个 @Input我正在拍摄，但 @Input 发生得太快以至于动画没有发生。我怎么知道动画什么时候完成才能触发@Input之后

CSS

@keyframes bulkSlideOut {
  100% {
    transform: translateY(100vh);
  }
}

HTML

<div *ngIf="displayBulkPay" class="bulk-pay-storage-container">
  <div class="header-container">
  .
  .
  </div>
</div>

@Input()
displayBulkPay: boolean;

【问题讨论】：

标签： css angular angular-animations

【解决方案1】：

在您的动画触发器中有一个 .start 和 .done 事件，您可以调用一个函数或设置一个值。

<div id="whatever" [@displayBulkPay]="canDoAFunctionToo(anything)"
     (@displayBulkPay.start)="onStart($event)"
     (@displayBulkPay.done)="onDone($event)">

【讨论】：