Vue.js SPA页面切换动画效果异常问题咨询

嘿，我来帮你搞定这个路由过渡的问题！你遇到的“旧视图离开时新视图从底部弹出”的情况，主要是两个核心原因导致的：新旧视图没有重叠布局，或者过渡类名和你的Vue版本不匹配，和用<transition>包裹<router-view>本身没关系，这个用法是完全正确的！

1. 先解决布局移位的问题 #

默认情况下，路由切换时，离开的旧组件和进入的新组件会同时存在于文档流中，浏览器会重新计算布局，新视图会把旧视图挤下去，看起来就像是从底部弹出来。解决办法很简单：让两个视图重叠在同一个位置。

你可以给<router-view>加上绝对定位，同时给它的父容器（比如<transition>的外层容器）设置相对定位，确保新老视图都在同一个区域：

<!-- 给transition外层加个容器，设置相对定位 -->
<div class="page-container">
  <transition name="example">
    <router-view class="router-view"></router-view>
  </transition>
</div>

.page-container {
  position: relative;
  min-height: 100vh; /* 保证容器高度覆盖整个视口，避免内容高度不够的问题 */
}
.router-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

这样新旧视图就会完全重叠，不会再出现布局移位的情况。

2. 检查过渡类名是否匹配Vue版本 #

这是很容易踩坑的点！Vue 2和Vue 3的过渡类名有变化：

• 如果你用的是Vue 2，你现在写的类名是对的；
• 如果你用的是Vue 3，那你写的.example-leave是错误的，Vue 3把离开阶段的起始类改成了.example-leave-from！

Vue 3的正确CSS应该是这样：

/* 进入起始状态 & 离开结束状态 */
.example-enter-from, .example-leave-to {
  opacity: 0;
}
/* 离开起始状态 & 进入结束状态 */
.example-leave-from, .example-enter-to {
  opacity: 1;
}
/* 过渡动画的时长和曲线 */
.example-enter-active, .example-leave-active {
  transition: opacity 500ms;
}

如果类名不匹配，旧视图的淡出动画不会触发，它会直接消失，新视图自然就会“挤”上来，看起来像从底部弹出。

额外小提示：过渡模式 #

如果你想要先等旧视图完全淡出，再让新视图淡入，可以给<transition>加上mode="out-in"属性：

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

不过这是“先出后进”的效果，如果你想要同时淡入淡出，就不用加这个属性，只要保证视图重叠就行。

按照上面的步骤调整后，应该就能实现你想要的平滑淡入淡出切换效果啦！

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