过渡特效

1. 快速上手

为路由切换添加过渡效果，其实就是使用 Transition 内置组件，没有其他新知识。

<router-view v-slot="{ Component }">
  <Transition name="fade" mode="out-in">
    <component :is="Component" />
  </Transition>
</router-view>

2. 相关细节

单个路由的过渡

单个路由的过渡：

• 如果对不同的路由的过渡有需求，那么可以通过以下的设置来做：
  • meta：设置元数据，上面记录过渡的方式
  • RouterView 插槽，通过插槽拿到 route，从而拿到元数据里面的过渡方式
  • <Transition>组件设置不同的 name 值从而应用不同的过渡方式

router/index.js

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
    //指定过渡效果
    meta: { transition: "fade" },
  },
  {
    path: "/login",
    name: "Login",
    component: Login,
    meta: { transition: "fade" },
  },
  {
    path: "/user",
    name: "User",
    component: User,
    meta: {
      transition: "fade",
    },
  },
  {
    path: "/admin",
    name: "Admin",
    component: Admin,
    meta: {
      transition: "slide-left",
    },
  },
];

App.vue

<template>
 <router-view v-slot="{ Component, route }">
    <transition :name="route.meta.transition" mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<style>
/* 淡入淡出 */
.fade-enter-active,
.fade-leave-active {
  transition: 0.2s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 滑动 */
.slide-left-enter-active,
.slide-left-leave-active {
  transition: 0.3s;
}

.slide-left-enter-from,
.slide-left-leave-to {
  transform: translateX(-100%);
}
</style>

路由动态过渡

基于路由动态过渡

这里可以使用导航守卫（全局后置守卫）来添加过渡效果

由此可见，组件的渲染阶段在进入路由之后

//使用路由全局后置守卫
router.afterEach((to) => {
  switch (to.path) {
    case '/panel-left':
      to.meta.transition = 'slide-left'
      break
    case '/panel-right':
      to.meta.transition = 'slide-right'
      break
    default:
      to.meta.transition = 'fade'
  }
})

使用Key强制渲染

使用Key：Vue 可能会自动复用看起来相似的组件，从而忽略了任何过渡，可以添加一个 key 属性来强制过渡。

---

-EOF-