transitionPlugin - 页面过渡动画

什么是 transitionPlugin？

transitionPlugin 是一个用于路由切换时显示过渡动画的插件。它可以在页面切换时添加平滑的动画效果，让用户体验更加流畅和美观，提升整体的视觉感受。

启用插件

import { createRouter, transitionPlugin } from '@pro/router'

const router = createRouter({
  // ... 其他配置
  plugins: [
    transitionPlugin()
  ]
})

在 template 中使用

<template>
  <router-view v-slot="{ Component }">
    <transition v-bind="$router.currentRouteTransitionProps.value">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

在 setup 中使用

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()
console.log(router.currentRouteTransitionProps.value)
</script>

自定义配置动画

提供了 2 种配置

方式一：给每个 route 单独设置动画名称

const routes = [
  {
    path:'/user',
    component: () => import("@/views/system/user/index.vue"),
    meta:{
      transitionName: 'fade'
    }
  },
  {
    path:'/role',
    component: () => import("@/views/system/role/index.vue"),
    meta:{
      transitionName: 'fade-down'
    }
  }
]

方式二：插件选项中统一配置动画

import { createRouter, transitionPlugin } from '@pro/router'

const router = createRouter({
  // ... 其他配置
  plugins: [
    transitionPlugin({
      transitionName: () => 'fade-down' // 统一配置所有路由动画
    })
  ]
})

插件配置选项

选项	类型	默认值	说明
transitionName	MaybeRefOrGetter<'fade' | 'fade-down' | 'fade-slide' | 'fade-up' | 'none'>	'fade-slide'	选填，路由切换时的动画名称

路由 Meta 配置选项

选项	类型	默认值	说明
transitionName	'fade' | 'fade-down' | 'fade-slide' | 'fade-up' | 'none'	'fade-slide'	选填，给每个路由配置不同的动画名称，优先级比插件选项的高

实际效果

使用这个插件后，你会体验到：

1. 平滑切换：页面切换时不再突兀，而是平滑过渡
2. 视觉反馈：用户能清楚感知到页面变化
3. 专业感：整体界面更加现代化和专业
4. 性能优化：动画流畅，不影响页面性能