添加transition后幻灯片组件元素错位的原因排查

我正在开发一个类幻灯片组件，期望当前文章居中显示，前后文章各显示一半。静态状态下布局正常，但添加transition: all 0.5s ease-in-out后，原本应该居中的带红边框元素出现错位。相关CSS代码如下：

.slideContainer{
  position: relative;
  overflow-x: hidden;
  width: 100%;
}

.slide{
  position: absolute;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  width: 50%;
  height: 100%;
  transition: all 0.5s ease-in-out;
}

.previousContainer{
  left: -10%;
  opacity: 1;
}

.currentArticle{
  width: 50%;
  left: 50%;
  z-index: 1;
  opacity: 1;
}

.nextContainer{
  left:110%;
  opacity: 1;
}

• 核心原因：.slide同时设置了left定位和transform: translateX(-50%)，且给all属性添加过渡。触发过渡时，浏览器会同时计算left和transform的动画，两者位移叠加导致元素偏离预期位置。

• 修复方案1：拆分过渡属性，仅过渡必要项
  将transition: all 0.5s ease-in-out改为只过渡left和opacity（transform用于居中，无需参与过渡）：

  .slide{
    position: absolute;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    width: 50%;
    height: 100%;
    transition: left 0.5s ease-in-out, opacity 0.5s ease-in-out;
  }
  

• 修复方案2：统一用transform实现定位，避免属性冲突
  完全依赖transform实现位移动画，不再混用left，消除计算冲突：

  .slideContainer{
    position: relative;
    overflow-x: hidden;
    width: 100%;
  }
  
  .slide{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  }
  
  .previousContainer{
    transform: translateX(-120%);
    opacity: 1;
  }
  
  .currentArticle{
    transform: translateX(-50%);
    z-index: 1;
    opacity: 1;
  }
  
  .nextContainer{
    transform: translateX(20%);
    opacity: 1;
  }
  

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