Vue.js Router Transition滑动动画异常（自动缩放重复）求助

嗨，新年快乐呀！🤗 咱们来搞定这个路由过渡时的缩放重复问题，我帮你分析下问题所在，然后给出具体的修复方案：

问题根源分析 #

从你给出的代码来看，主要有这几个问题导致了动画异常：

1. CSS语法错误：.slide-enter, 后面多了个逗号，这会导致浏览器解析样式出错，部分样式不生效；
2. 过渡模式未设置：默认情况下Vue的<transition>会同时执行进入和离开动画，两个<router-view>会短暂重叠，引发布局紊乱，出现缩放重复的视觉异常；
3. 容器样式未固定：.main类没有设置稳定的尺寸或定位，动画过程中元素布局变化会触发不必要的重排重绘，导致缩放效果。

具体修复方案 #

1. 修正CSS语法错误并完善过渡样式 #

首先把多余的逗号去掉，同时给过渡元素添加transition属性，明确动画的时长和曲线，确保过渡效果平滑：

/* 基础容器样式，固定尺寸避免布局波动 */
.main {
  width: 100%;
  /* 开启硬件加速，提升动画流畅度 */
  will-change: transform, opacity;
}

/* 统一过渡动画的属性和时长 */
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
}

/* 进入动画的初始状态、离开动画的结束状态 */
.slide-enter-from,
.slide-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

/* 如果你用的是Vue 2，把上面的.slide-enter-from改成.slide-enter即可 */

2. 设置过渡模式 #

给<transition>添加mode="out-in"属性，确保离开的视图动画完成后，再进入新的视图，避免两个视图重叠：

<transition name="slide" mode="out-in">
  <router-view class="main" v-cloak/>
</transition>

3. 补充v-cloak的样式（可选但建议） #

v-cloak是用来防止页面加载时的闪烁，建议给它添加样式确保初始状态隐藏：

[v-cloak] {
  display: none;
}

验证效果 #

做完以上修改后，路由切换时的滑动过渡应该就不会出现缩放重复的问题了，动画会平滑地从右侧滑入滑出。如果你的Vue版本是2，记得把.slide-enter-from改成.slide-enter，.slide-leave-to对应.slide-leave-active里的目标状态哦～

内容的提问来源于stack exchange，提问作者King in the world.