Using Animation Callbacks in Angular

app.component.html

<div style="margin-left: 10px;margin-top: 10px;">
  <button class="btn btn-primary" (click)="onAnimate()">Animate</button>
  <br><br>
  <div style="width: 100px;height: 100px;background-color: cornflowerblue"
       [@animation1]="state1"
       (@animation1.start)="onAnimationStarted($event)"
       (@animation1.done)="onAnimationDone($event)"
  ></div>
</div>

app.component.ts

import {Component} from '@angular/core';
import {
  trigger,
  state,
  style,
  animate,
  transition, useAnimation,
  // ...
} from '@angular/animations';
import {bounceIn} from 'ng-animate';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('animation1', [transition('1 <=> 2', useAnimation(bounceIn, {
      params: {timing: 2, delay: 0.05}
    }))])
  ],
})
export class AppComponent {
  title = 'animations';
  state1 = 1;

  onAnimate() {
    // switch state
    if (this.state1 === 1) {
      this.state1 = 2;
    } else {
      this.state1 = 1;
    }
  }

  onAnimationStarted(event) {
    console.log(event);
  }

  onAnimationDone(event) {
    console.log(event);
  }
}

Related