请选择 进入手机版 | 继续访问电脑版

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

[复制链接]
谢世民 发表于 2021-1-1 17:45:41 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
Vue项目中使用animate转场动画加入一些简朴且花哨的页面切换效果

第一步 引入css样式

在vue项目中的public文件夹里的index.html引入链接,复制即可:
  1. [/code] 如下图:
  2. [align=center][img]https://img-blog.csdnimg.cn/20201231172226787.png#pic_center[/img][/align]
  3. [align=center][img]https://img-blog.csdnimg.cn/20201231172237637.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NhdmVuZGl4ZQ==,size_16,color_FFFFFF,t_70#pic_center[/img][/align]
  4. 这里我放在了第10行
  5. [size=3]第二步 在组件中使用transition标签将routerview包起来[/size]
  6. 要想实现动画效果,就要在 routerview 上实现,复制即可
  7. [code]   
复制代码
如下图:

这里需要用到两个属性,`
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年新年快乐,一起顺利。 ♥♥♥


来源:https://blog.csdn.net/Cavendixe/article/details/112034960
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )