web前端开发博客
专注web前端发展
2018年09月05日 作者: 国瑞个人博客 461次浏览
vue-router中自带前端路由功能，但是切换起来比较的生硬，缺少一些美感，vue-router在设计之初也考虑到了这个问题，我们可以使用transition标签来给切换添加动画，下面的示例，演示的是当前页面向左逐渐消失，下一个页面向左逐渐显示。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | //template <transition> <router-view></router-view> </transition> //style（css） .v-enter { opacity: 0; transform: translateX(100%); } .v-leave-to { opacity: 0; transform: translateX(-100%); position: absolute; } .v-enter-active, .v-leave-active { transition: all 0.5s ease; } |
v-enter: 定义进入过渡的开始状态
v-enter-active: 定义进入活动状态
v-enter-to: 定义进入的结束状态
v-leave: 定义离开过渡的开始状态
v-leave-active: 定义离开活动状态
v-leave-to: 定义离开的结束状态
这里的name添加在transition中，示例如下：
如果添加
out-in: 当前元素先进行过渡，完成之后新元素过渡进入
1 2 3 4 5 6 7 8 9 10 11 12 13 | <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled" > <!-- ... --> </transition> |
示例|：点击加入购物车的动画，目前正在做……
点击快速分享：
以上就是国瑞前端个人博客带来的是《利用vue-router中的transition添加切换动画》，感谢您的观看！
如果没有特殊的说明，本文即为国瑞前端博客原创(www.huanggr.cn)，欢迎读者转载并保留本站版权！https://www.huanggr.cn/539.html
「专业前端博客，如果觉得我的文章对您有用，请帮助本站成长」
谢谢你请我吃鸡腿*^_^*
支付宝
微信
上一篇：常见问题解析
下一篇：微信小程序开发
相关文章：国瑞个人博客: https://www.huanggr.cn/，我们关注Web前端开发技术，web前端开发,移动前端开发，前端资讯，同时分享前端资源和工具等，期待你的参与,了解更多..
博主独立研发主题：
web：可以，百度一搜就搜到了这篇，写的挺好
评：elementUI如何禁用时间组件日期web：感觉博主推荐，postman的功能非常强大，用起来很方便
评：推荐一款接口测试小插件_postmanweb：Smile_Blog主题，一个非常不错的wordpress主题，，值得推荐
评：Smile_Blog主题简介
国瑞个人博客：多谢夸奖，博主自建主题，地址为huangguorui.cn，欢迎鉴赏！
评：Smile_Blog主题简介
在线工具：不错的主题，非常适合技术类博客。
评：Smile_Blog主题简介国瑞个人博客：眉清目秀哇，咋地啊，对我网站感兴趣？
评：博主参加专升本去了
共有 0 条评论