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

1 个答案: