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

相关推荐
新中地GIS开发老师27 分钟前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang34 分钟前
前端性能优化
前端·javascript·vue.js·性能优化
Rysxt_39 分钟前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含43 分钟前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端44 分钟前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
你的人类朋友1 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
子兮曰2 小时前
npm workspace 深度解析:与 pnpm workspace 和 Lerna 的全面对比
前端·javascript·npm
颜酱2 小时前
用搬家公司的例子来入门webpack
前端·javascript·webpack