angular中使用animation.css实现翻转展示卡片正反两面效果

html

<div
  (click)="flip()"
  class="animate__animated cursor--pointer"
  [ngClass]="{ animate__flipInX: isFlipped }"
>
  <div *ngIf="!isFlipped">正面</div>

  <div *ngIf="isFlipped">背面</div>
</div>

component.ts

 isFlipped: boolean = false;

  flip() {

    this.isFlipped = !this.isFlipped;
    
  }

安装插件

https://animate.style/

在angular.json中使用

"styles": [
              "node_modules/animate.css/animate.min.css",
              "src/styles.scss",
            
            ],

以上：从正面翻转到背面看得到翻转，但从背面翻转到正面

如果加上另一个方向翻装，div会消失