Bounce animation in angular

Question

I am using the angular animation plugin ( https://www.npmjs.com/package/@angular/animations ) in my application. Now I need a bounce when the array is to push or pop into service.

Here is my template

<h2 *ngIf="standalone" class="card-header h6 bg-transparent text-center">
        {{ 'ideas.merge-cart.heading' | translate }}
        <span *ngIf="service.ideas.length > 0" class="badge badge-primary badge-notify" [@bounceIn]>{{service.ideas.length}}</span>
      </h2>

Here construction

 constructor(private ideaService: IdeaService, private timeService: TimeService, public mergeCartService: MergeCartService) {
  }

Here is my animation

export const bounceIn = trigger('bounceIn', [
  transition(':enter', [
    style({ transform: 'scale(0.5)', opacity: 0 }),
    animate('1s cubic-bezier(.8, -0.6, 0.2, 1.5)',
    style({ transform: 'scale(1)', opacity: 1 }))
  ])
]);

Add the bounce animation like https://daneden.github.io/animate.css/. Could you help how can I create a bounce when array is to push or pop? Thanks in advance.

Answer 1

It easy enough with animation keyframes...

@Component({
  selector: 'app-animations',
  template: `
    <p>Play animation: <button (click)="bounceDivState='active'">Play</button></p>
    <div [@bounceDiv]="bounceDivState"></div>
  `,
  animations: [
    trigger('bounceDiv', [
      state('initial', style(divStyle)),
      state('active', style(divStyle)),
      transition('* => active', [
        animate('2s', keyframes([
          style({ transform: 'scale(1,1) translateY(0)' }),
          style({ transform: 'scale(1.1, 0.9) translateY(0)' }),
          style({ transform: 'scale(0.9, 1.1) translateY(-100px)' }),
          style({ transform: 'scale(1.05, 0.95) translateY(0)' }),
          style({ transform: 'scale(1,1) translateY(-7px)' }),
          style({ transform: 'scale(1,1) translateY(0)' }),
        ]))
      ])
    ])
  ]
})
export class AnimationsComponent {
  bounceDivState = 'initial';
}