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会消失