以角度弹跳动画

Question

我正在我的应用程序中使用角度动画插件（https://www.npmjs.com/package/@angular/animations）。现在，当阵列要推入或弹出服务时，我需要反弹。

这是我的模板

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

这里构造

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

这是我的动画

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 }))
  ])
]);

[添加跳出动画，例如https://daneden.github.io/animate.css/。当阵列推入或弹出时，您能帮我怎样创建反弹？提前致谢。

Answer 1

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';
}