vue-router中自带前端路由功能,但是切换起来比较的生硬,缺少一些美感,vue-router在设计之初也考虑到了这个问题,我们可以使用transition标签来给切换添加动画,下面的示例,演示的是当前页面向左逐渐消失,下一个页面向左逐渐显示。
利用vue-router中的transition添加切换动画(切换一般写在app.vue中)
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; } |
过渡的css类名
v-enter: 定义进入过渡的开始状态
v-enter-active: 定义进入活动状态
v-enter-to: 定义进入的结束状态
v-leave: 定义离开过渡的开始状态
v-leave-active: 定义离开活动状态
v-leave-to: 定义离开的结束状态
使用name属性改变类名前缀
这里的name添加在transition中,示例如下:
如果添加

过度模式
out-in: 当前元素先进行过渡,完成之后新元素过渡进入
transition中的钩子函数
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> |
示例|:点击加入购物车的动画,目前正在做……
7