Vue项目中使用animate转场动画加入一些简单且花哨的页面切换效果

第一步 引入css样式

在vue项目中的public文件夹里的index.html引入链接，复制即可：

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" 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__ 去掉

**

以上

完，祝你成功。

另：预祝各位2021年新年快乐，一起顺利。 ♥♥♥