huanggr
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