素材巴巴 > 程序开发 >

vue项目转场动画 routerview路由跳转动画 (animate)

程序开发 2023-09-03 14:32:12

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

第一步 引入css样式

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


 

如下图:
在这里插入图片描述

在这里插入图片描述
这里我放在了第10行

第二步 在组件中使用transition标签将routerview包起来

要想实现动画效果,就要在 routerview 上实现,复制即可


 

如下图:

在这里插入图片描述

这里需要用到两个属性,

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


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。