版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82732118
Vue 实现路由过渡动画
在进行路由跳转时,可以加上动画效果
更多精彩
- 更多技术博客,请移步 asing1elife’s blog
准备工作
- 编写动画效果
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
will-change: transform;
transition: all 500ms;
position: absolute;
}
.slide-right-enter {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
实现步骤
- 为路由可能跳转到的组件添加索引,确保动画的过渡效果是有序的
- 在 meta 中可以添加自定义参数,此处添加 index 用于表示索引
children: [
{
path: 'hot',
name: 'hot',
component: hot,
meta: {
index: 0
}
},
{
path: 'mooc',
name: 'mooc',
component: mooc,
meta: {
index: 1
}
},
{
path: 'self',
name: 'self',
component: self,
meta: {
index: 2
}
},
{
path: 'training/:id',
name: 'training',
component: training,
props: true,
meta: {
index: 3
}
}
]
- 在需要跳转的路由外层包裹
<transition>
组件
- 同时为组件指定可能执行的动画效果
<transition :name="transitionName">
<router-view></router-view>
</transition>
- 通过监听路由变化判断具体执行哪个动画
- 可以通过路由的参数获取到之前设置的索引,从而判断动画效果是向左还是向右
watch: {
'$route' (to, from) {
console.log(to)
let toName = to.name
const toIndex = to.meta.index
const fromIndex = from.meta.index
this.transitionName = toIndex < fromIndex ? 'slide-right' : 'slide-left'
}
}