Vue-router实现CSS页面过渡时点击跳转元素左移偏移问题求助

问题原因 #

• <transition>组件的mode属性语法错误：你写的mode:out-in是错误写法，正确应为mode="out-in"。错误写法相当于过渡模式未生效，进出动画会同时触发，两个路由组件短时间内同时在DOM中占用布局空间，互相挤压就会出现水平偏移。单元素页面布局宽度更小，挤压偏移幅度更大，完全匹配你遇到的现象。
• 动画规则冲突：.fade-leave-active中同时定义了transition和animation两个控制透明度变化的规则，会导致动画时序异常。
• transform初始值未明确：你的动画只声明了Y轴位移，未显式重置X轴位移，若页面组件本身有其他transform规则，动画过程中会出现非预期的X轴偏移。

修复方案 #

把相关代码修正为以下内容即可：

<template>
 <div>
   <!-- 修正mode属性的写法 -->
   <transition name="fade" mode="out-in">
     <router-view></router-view>
   </transition>
 </div>
</template>

<style>
/* 移除重复的transition规则，只保留animation */
.fade-leave-active {
 animation: fade-out 1s ease-out;
}

/* 显式声明transform初始值包含X轴为0，Vue2用户请将类名改为.fade-leave */
.fade-leave-from {
 opacity: 1;
 transform: translateX(0) translateY(0);
}

.fade-enter-active {
 animation: fade-in 2s ease-out;
}

/* 补充enter阶段初始状态，避免继承异常，Vue2用户请将类名改为.fade-enter */
.fade-enter-from {
 opacity: 0;
 transform: translateX(0) translateY(-300px);
}

@keyframes fade-out {
 0% {
   opacity: 1;
   /* 显式声明X轴位移为0 */
   transform: translateX(0) translateY(0);
 }
 60% {
   opacity: 0.4;
   transform: translateX(0) translateY(0);
 }
 100% {
   opacity: 0;
   transform: translateX(0) translateY(-300px);
 }
}

@keyframes fade-in {
 0% {
   opacity: 0;
   transform: translateX(0) translateY(-300px);
 }
 60% {
   opacity: 0;
 }
 100% {
   opacity: 1;
   transform: translateX(0) translateY(0);
 }
}
</style>

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