npm install ng-animate --save
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"></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; } } }
References
https://github.com/jiayihu/ng-animate