Angular：轻弹（半弹）动画

Question

我的卡片有正面和背面的垂直翻转动画

      animations: [
    trigger('cardFlick', [
      state('0', style({
        transform: 'none'
      })),
      state('1', style({
        transform: 'rotateX(-180deg)'
      })),
      transition('0 => 1', [
        animate('400ms')
      ]),
      transition('1 => 0', [
        animate('400ms')
      ])
    ])
  ]

但我想做的是制作卡片动画。我的意思是卡片不会完全翻转而是半翻转，更改卡片上的内容，然后翻转回来显示背面。当然，这意味着我的卡片只有一个面，我可以在其中切换内容。我该怎么做？

在我之前的尝试中，问题始终是 ngIf 太快而破坏了动画。如何延迟 ngIf 或先播放第一个动画状态然后让 ngIf 切换内容再翻转？

Answer 1

您可以在动画结束时通过绑定 (@cardFlick.done).

将动画事件 done 用于运行一些代码

例如：

<div [@cardFlick]="flicked ? '1' : '0'" (@cardFlick.done)="showFront =!showFront">
  <p *ngIf="showFront">front</p>
  <p *ngIf="!showFront">back</p>
</div>

Angular：轻弹（半弹）动画

Angular: Flick (half flip) animation

typescript

angular

angular-animations