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

相关推荐
一道雷几秒前
🚀 Vue Router 插件系统:让路由扩展变得简单优雅
前端·javascript·vue.js
辣辣y1 分钟前
Tailwind CSS 使用指南
前端·css
wgb040910 分钟前
vxe table 升级之后页面数据不显示解决方法
java·前端·javascript
不如摸鱼去39 分钟前
从 Wot UI 出发谈 VSCode 插件的自动化发布
前端·vscode·开源·自动化
IT_陈寒1 小时前
Python开发者必看:这5个鲜为人知的Pandas技巧让你的数据处理效率提升50%
前端·人工智能·后端
豆苗学前端2 小时前
写给女朋友的第一封信,测试方法概论
前端·后端·设计模式
半桶水专家2 小时前
Vue 3 插槽(Slot)详解
前端·javascript·vue.js
袁煦丞2 小时前
本地AI绘画神器+全局访问——Stable Diffusion WebUI 成功突破:cpolar内网穿透实验室第462个成功挑战
前端·程序员·远程工作
一枚前端小能手2 小时前
🏗️ JavaScript类深度解析 - 从构造函数到现代特性的完整指南
前端·javascript