Vue路由切换时如何实现平滑过渡动画？

IT人钰曦提问于 2026-02-24 19:59:18 阅读 38

优化

我在用 Vue 3 + Vue Router 做页面切换，想加个淡入淡出的过渡效果，但试了 transition 包 router-view 后动画根本不触发，页面直接闪过去。是不是我写法有问题？

这是我的代码：

<template>
  <transition name="fade" mode="out-in">
    <router-view />
  </transition>
</template>

<style scoped>
.fade-enter-active { transition: opacity 0.3s; }
.fade-enter-from { opacity: 0; }
.fade-leave-to { opacity: 0; }
</style>

我来解答赞 6 收藏

反馈

2 条解答

长孙胜换 Lv1

你这写法本身没问题，但 scoped 样式里写的类名没生效，因为是动态组件，scoped 样式不作用于它内部渲染的内容。把 style 改成全局的或者用 ::v-deep 就能触发动画，比如：

<style scoped>

.fade-enter-active,

.fade-leave-active {

  transition: opacity 0.3s;

}

.fade-enter-from,

.fade-leave-to {

  opacity: 0;

}

</style>

或者干脆去掉 scoped，或者用 ::v-deep 包裹这些类名。应该能用。

2026-02-26 08:10

乐萱 Lv1

问题在于你只写了进入和离开的过渡类，但没定义 fade-leave-active，导致离开时没有过渡效果，Vue 3 的 transition 要求leave-active必须存在。

修复方案：

2026-02-24 20:03