Vue路由切换时transition过渡效果失效问题求助

问题场景 #

我编写了如下App.vue文件：

<script setup>
import { RouterView } from "vue-router";
</script>

<template>
  <RouterView v-slot="{ Component }">
    <transition :name="fade" mode="out-in">
      <component :is="Component" />
    </transition>
  </RouterView>
</template>

以及路由配置文件：

import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "signin",
      component: () => import("../views/signin.vue"),
    },
    {
      path: "/dashboard",
      name: "dashboard",
      component: () => import("../views/dashboard.vue"),
    },
  ],
});

export default router;

运行应用后，无论是调用$router.push("/dashboard");还是使用<router-link to="/dashboard" active-class="active">切换路由，都没有过渡效果出现。

可能的原因及修复方案 #

1. 过渡名称绑定错误 #

<transition>组件中使用了:name="fade"，但fade并未在组件中定义为响应式变量，导致过渡名称无法被正确识别。

修复方式：直接使用字符串字面量作为过渡名称：

<transition name="fade" mode="out-in">
  <component :is="Component" />
</transition>

2. 未添加过渡对应的CSS样式 #

<transition>仅提供过渡逻辑框架，必须配合对应的CSS类才能产生视觉上的过渡效果。需要在全局样式文件或组件内部添加如下样式：

/* 进入过渡阶段 */
.fade-enter-from {
  opacity: 0;
}
.fade-enter-to {
  opacity: 1;
}
.fade-enter-active {
  transition: opacity 0.5s ease;
}

/* 离开过渡阶段 */
.fade-leave-from {
  opacity: 1;
}
.fade-leave-to {
  opacity: 0;
}
.fade-leave-active {
  transition: opacity 0.5s ease;
}

3. 路由组件缺少唯一标识（可选排查项） #

如果存在路由组件复用场景（比如同一路由仅参数变化），Vue可能不会触发组件重新渲染，进而跳过过渡动画。可以为<component>添加唯一key：

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

4. 过渡模式或时长问题 #

mode="out-in"配置本身没问题，但如果过渡时长过短，可能导致视觉上无法感知。可以尝试延长过渡时长，或者暂时移除mode属性测试基础过渡效果。

内容的提问来源于stack exchange，提问作者nrgyzer