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

相关推荐
Onion_L11 分钟前
Rust CLI 发布 NPM 的开发记录🫕
前端·rust·npm
右子11 分钟前
Claude Code:介绍与使用教程
前端·人工智能·后端
bigyoung12 分钟前
如何使用 `react-i18next` 来国际化一段包含 React 组件的文本
前端·javascript
沐土Arvin15 分钟前
前端代码格式化工具HTML离线版
前端
舟舟好梦17 分钟前
SZU大学物理实验报告|光敏电阻
前端
林太白29 分钟前
NestJS-角色模块
前端·javascript·nestjs
种豆走天下32 分钟前
VUE进阶案例
前端·javascript·vue.js
陈随易37 分钟前
盘点微信开发者工具V1和V2的区别
前端·后端·程序员
zengyuhan50339 分钟前
使用Rust 串口通信 及 MTP文件获取
前端·rust
小宋搬砖第一名41 分钟前
阿里云部署小白教程
前端