检测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)">