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;

Zuriel · Accepted Answer · 2018-09-26 00:01:41Z

1

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

answered Sep 26, 2018 at 0:01

Zuriel

1,8581 gold badge19 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

detect when css keyframe is done - Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related