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

Question

我有一个持续一秒钟的动画，我有一个 @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>

TS

@Input()
displayBulkPay: boolean;

Answer 1

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

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

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

detect when css keyframe is done - Angular

css

angular

angular-animations