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

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

npm install animate.css --save

第二步：在 main.js 引入

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写法，例如：

//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:是否在初始渲染时使用过渡。可以应用初始挂载动画。