animate.css与vue中的v-if/v-show如何一起使用

第一步:在已有的vue项目中安装animate.css

javascript 复制代码
npm install animate.css --save

第二步:在 main.js 引入

javascript 复制代码
import 'animate.css'

第三步:如果在vue中使用了v-if 或者v-show 的话就不能直接在元素上加入animate的class。我们应该在v-if/v-show的元素外层添加transition标。标签添加完成之后要注意几点:

  1. v-if 的切换太快,动画来不及执行就被移除了 DOM。可以通过设置 transition 的 duration 参数让动画时间稍长一些。
  2. 每次 v-if 切换时,都会重新创建 DOM 元素,Animate.css 的类会被移除。需要在切换后手动重新加上 Animate.css 的类。
  3. v-if 会直接操作 DOM,这样会跳过 Vue 的过渡系统。可以改为使用 transition 组件+v-show 来实现切换。
  4. class 应用顺序错误,Animate.css 的类必须在内联样式和其他类之后应用才能生效。
  5. CSS 样式优先级问题,Animate.css 的样式被其他样式覆盖了。可以通过提高 Animate.css 样式优先级来解决。
  6. 如果是页面初始加载没有动画,可能是因为元素首次渲染,需要触发第二次渲染才会有过渡动画。

第四步根据下载的Animate.css依赖中的class名来添加到transition上面。

第五步transition写法,例如:

html 复制代码
//isAcademic true 显示二维码图片,false显示客服图标。默认为true
<template>
 <transition
      enter-active-class="animate__animated animate__rotateInUpRight"
      leave-active-class="animate__animated animate__rotateOutUpRight"
      appear
    >
      <div class="academic-erweima"
           v-show="isAcademic"
      >
        <i class="el-icon-close academic-erweima-colse" @click="isAcademic = false"></i>
        <img src="../../assets/images/zhiku/erweima.png" alt="" class="erweima-acade">
        <p class="text-a">扫码咨询专家助手</p>
      </div>
    </transition>

    <transition
      enter-active-class="animate__animated animate__lightSpeedInRight"
      leave-active-class="animate__animated animate__lightSpeedOutRight"
    >
      <div
        v-show="!isAcademic"
        class="academic-erweima academic-erweima-small text-a" @click="isAcademic = true">
        专家助手
      </div>
    </transition>
</<template>

解释

  • enter-active-class :定义进入过渡的活动状态时应用的类。在元素被插入时生效,用于应用进入动画。
  • leave-active-class:定义离开过渡的活动状态时应用的类。在元素被移除时生效,用于应用离开动画。
  • appear:是否在初始渲染时使用过渡。可以应用初始挂载动画。
相关推荐
小白学习日记41 分钟前
【复习】HTML常用标签<table>
前端·html
程序员大金44 分钟前
基于SpringBoot+Vue+MySQL的装修公司管理系统
vue.js·spring boot·mysql
丁总学Java1 小时前
微信小程序-npm支持-如何使用npm包
前端·微信小程序·npm·node.js
yanlele1 小时前
前瞻 - 盘点 ES2025 已经定稿的语法规范
前端·javascript·代码规范
懒羊羊大王呀2 小时前
CSS——属性值计算
前端·css
xgq2 小时前
使用File System Access API 直接读写本地文件
前端·javascript·面试
用户3157476081352 小时前
前端之路-了解原型和原型链
前端
永远不打烊2 小时前
librtmp 原生API做直播推流
前端
北极小狐2 小时前
浏览器事件处理机制:从硬件中断到事件驱动
前端
道爷我悟了2 小时前
Vue入门-指令学习-v-html
vue.js·学习·html