前端路由切换时如何加过渡动画？

Top丶梓涵提问于 2026-03-30 23:42:15 阅读 3

前端

我在用 Vue Router 做页面切换，想给路由组件加个淡入淡出的过渡效果，但试了几次都不生效。官方文档说要用包裹，我也照做了，可动画就是没出来。

我的写法大概是这样：

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

CSS 里也写了对应的类：

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

但页面切换时还是硬切，没有任何过渡，是不是哪里漏了？

过渡动画

我来解答赞 1 收藏

反馈

1 条解答

令狐馨翼 Lv1

看起来你已经把基本的过渡设置都写对了，但有时候 Vue Router 和 Vue 的版本兼容性问题会搞出一些小麻烦。我来分享下常见的解决方案吧。

首先确认你的 Vue 版本是不是 3.x，如果是的话，fade-enter-from 和 fade-leave-to 是正确的写法。但要是用的是 Vue 2.x，记得把这两个类名改成 fade-enter 和 fade-leave-active。

另外有个容易忽略的点：确保你在引入 CSS 过渡类时，样式没有被其他地方覆盖。试试给 .fade-enter-active, .fade-leave-active 加上更高的优先级，比如：



.my-app .fade-enter-active,

.my-app .fade-leave-active {

  transition: opacity 0.3s;

}

.my-app .fade-enter,

.my-app .fade-leave-active {

  opacity: 0;

}

还有个小技巧，如果还是不行，可以尝试在组件内部加个 <div> 包裹 router-view，有时这种嵌套结构反而能让过渡效果正常工作。

最后提醒一下，如果用了懒加载组件，记得加上 appear 属性，像这样：<transition name="fade" mode="out-in" appear>，这能确保首次加载也有动画效果。

这几个方法我试过都有效，希望能帮到你。调试动画有时候确实挺烦人的，加油吧。

2026-03-31 00:07