《Vue Router实战教程》18.过渡动效

欢迎观看《Vue Router 实战（第4版）》视频课程

1. 1. 过渡动效

想要在你的路径组件上使用转场，并对导航进行动画处理，你需要使用 <RouterView> 插槽：

<router-view v-slot="{ Component }">

  <transition name="fade">

    <component :is="Component" />

  </transition>

</router-view>

Transition 的 API 在这里同样适用。

<style scoped>

.fade-enter-active, .fade-leave-active {

  transition: opacity 0.5s;

}

.fade-enter, .fade-leave-to {

  opacity: 0;

}

</style>

1. 1. 1. 单个路由的过渡

上面的用法会对所有的路由使用相同的过渡。如果你想让每个路由的组件有不同的过渡，你可以将元信息和动态的 name 结合在一起，放在<transition> 上：

const routes = [

  {

    path: '/custom-transition',

    component: PanelLeft,

    meta: { transition: 'slide-left' },

  },

  {

    path: '/other-transition',

    component: PanelRight,

    meta: { transition: 'slide-right' },

  },

]

<router-view v-slot="{ Component, route }">

  <!-- 使用任何自定义过渡和回退到 `fade` -->

  <transition :name="route.meta.transition || 'fade'">

    <component :is="Component" />

  </transition>

</router-view>

<style scoped>

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

}

</style>

1. 1. 1. 基于路由的动态过渡

也可以根据目标路由和当前路由之间的关系，动态地确定使用的过渡。使用和刚才非常相似的片段：

<!-- 使用动态过渡名称 -->

<router-view v-slot="{ Component, route }">

  <transition :name="route.meta.transition">

    <component :is="Component" />

  </transition>

</router-view>

我们可以添加一个 after navigation hook，根据路径的深度动态添加信息到 meta 字段。

router.afterEach((to, from) => {

  const toDepth = to.path.split('/').length

  const fromDepth = from.path.split('/').length

  to.meta.transition = toDepth < fromDepth ? 'slide-right' : 'slide-left'

})

1. 1. 1. 强制在复用的视图之间进行过渡

Vue 可能会自动复用看起来相似的组件，从而忽略了任何过渡。幸运的是，可以添加一个 key 属性来强制过渡。这也允许你在相同路由上使用不同的参数触发过渡：

<router-view v-slot="{ Component, route }">

  <transition name="fade">

    <component :is="Component" :key="route.path" />

  </transition>

</router-view>