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> |
示例|：点击加入购物车的动画，目前正在做……
「梦想一旦被付诸行动，就会变得神圣，如果觉得我的文章对您有用，请帮助本站成长」
上一篇：常见问题解析
下一篇：微信小程序开发
国瑞个人博客: https://www.huanggr.cn/，我们关注Web前端开发技术，web前端开发,移动前端开发，前端资讯，同时分享前端资源和工具等，期待你的参与,了解更多..
博主独立研发主题：
没咋研究，emmm
评：web前端绘制八卦图_超简单教程这个是太极阴阳鱼，不是八卦图。
评：web前端绘制八卦图_超简单教程
后会有期（1年前 (2020-08-14)）文章不错
评：宝塔系统面板无法正常显示我采用该方法解决了才发布的教程
评：iview-admin点击路由报错vue-router.esm.js?8c4f:2007 Uncaught (in promise) NavigationDuplicated {_name: "Navi网站被攻击了，有些源码文件损坏了
评：前端搜索框下方保留搜索记录
12（2年前 (2020-03-11)）为什么我的foreach会报错 Error in v-on handler: "TypeE...
评：iview中多选框单选实现方法
共 0 条评论关于"利用vue-router中的transition添加切换动画"
最新评论