页面切换动画怎么实现平滑过渡？

子晨 Dev 提问于 2026-03-13 16:31:17 阅读 9

组件

我在用 Vue 做一个单页应用，想在路由切换时加个淡入淡出的动画，但试了 transition 包裹 router-view 后没效果。是不是哪里写错了？

我的代码是这样写的：

<transition name="fade">
  <router-view />
</transition>

然后 CSS 里写了 .fade-enter-active { opacity: 0; }，但页面切换还是硬切，完全没有动画……求指点！

我来解答赞 0 收藏

反馈

1 条解答

极客甜茜 Lv1

问题在于你的 CSS 写错了。.fade-enter-active 是动画执行中的状态，你把 opacity: 0 写在这里完全没效果。

Vue transition 的几个 class 是这样的逻辑：.fade-enter-from 是进入的初始状态，.fade-enter-to 是进入的结束状态，.fade-enter-active 只是定义过渡效果本身。

你需要的写法是：

.fade-enter-active,

.fade-leave-active {

  transition: opacity 0.3s ease;

}



.fade-enter-from,

.fade-leave-to {

  opacity: 0;

}

这样进入时从透明渐变到显示，离开时从显示渐变到透明。

另外如果你的页面切换还是没效果，可以试试给 router-view 加个 key：

因为 Vue 默认会复用组件，加上 key 强制让它重新创建，transition 才能触发。

2026-03-13 17:02