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标。标签添加完成之后要注意几点:

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

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

在这里插入图片描述

第五步transition写法，例如：

//isAcademic true 显示二维码图片，false显示客服图标。默认为true
<template><transitionenter-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><transitionenter-active-class="animate__animated animate__lightSpeedInRight"leave-active-class="animate__animated animate__lightSpeedOutRight"><divv-show="!isAcademic"class="academic-erweima academic-erweima-small text-a" @click="isAcademic = true">专家助手</div></transition>
</<template>