Vue 实现路由过渡动画

Vue 实现路由过渡动画

在进行路由跳转时，可以加上动画效果

更多精彩

• 更多技术博客，请移步 asing1elife’s blog

准备工作

1. 编写动画效果

.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);
}

实现步骤

1. 为路由可能跳转到的组件添加索引，确保动画的过渡效果是有序的
   
   • 在 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
    }
  }
]

1. 在需要跳转的路由外层包裹 <transition> 组件
   
   • 同时为组件指定可能执行的动画效果

<transition :name="transitionName">
  <router-view></router-view>
</transition>

1. 通过监听路由变化判断具体执行哪个动画
   
   • 可以通过路由的参数获取到之前设置的索引，从而判断动画效果是向左还是向右

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'
  }
}