Vue项目中使用animate转场动画加入一些简单且花哨的页面切换效果
第一步 引入css样式
在vue项目中的public文件夹里的index.html引入链接，复制即可：
<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">
如下图：
这里我放在了第10行
第二步 在组件中使用transition标签将routerview包起来
要想实现动画效果，就要在 routerview 上实现，复制即可
<transition
enter-active-class="animated bounce"
leave-active-class="animated bounce"
>
<router-view></router-view>
</transition>
如下图：
这里需要用到两个属性，
enter-active-class 进入时的动画类名；leave-active-class 离开时的动画类名
我们可以在vue官网找到自定义过度的类名，复制即可：
https://cn.vuejs.org/v2/guide/transitions.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BF%87%E6%B8%A1%E7%9A%84%E7%B1%BB%E5%90%8D
第三步 设置animate动画样式的类名
再到animate的官网找到自己喜欢的动画样式，复制类名：
https://animate.style/
如下图：
单击图标复制类名：
复制好我们就可以到之前写好的标签中使用了，在类名中加上animated，
空一格后面加上要添加的动画类名即可
**
注意：这里复制的类名都是这种格式： animate__bounce 需要把前面的 animate__ 去掉
**
以上
完，祝你成功。