detect when css keyframe is done - Angular

Question

I have an animation that last one second and I have an @InputI'm taking, but the @Input happens so fast that the animation doesn't take place. How can I know when the animation is done in order to trigger the @Input after

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;

score 1 · Accepted Answer · answered Sep 26 '18 at 00:01

There is a .start and .done event in your animation triggers that you can call a function or set a value with.

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

detect when css keyframe is done - Angular

1 Answers1