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年新年快乐,一起顺利。 ♥♥♥

Logo

前往低代码交流专区

更多推荐