overflow hidden与父元素宽度过渡异常：hover过渡不连贯求助

问题出在仅对滑块的宽度做过渡，而容器总宽度的变化是瞬间完成的，导致蓝色盒子先移位再等待滑块展开。我们可以调整布局，让包含黄色盒子和滑块的容器宽度平滑过渡，从而实现全程连贯的动画效果：

调整后的HTML结构 #

<div class="container">
  <div class="hover-wrapper">
    <div class="yellow-box"></div>
    <div class="slider">提示消息</div>
  </div>
  <div class="blue-box"></div>
</div>

对应的CSS代码 #

.container {
  display: flex;
  align-items: center;
}

.hover-wrapper {
  width: 50px; /* 初始宽度等于黄色盒子宽度 */
  overflow: hidden;
  transition: width 0.5s ease; /* 给容器宽度加过渡动画 */
}

.yellow-box {
  width: 50px;
  height: 50px;
  background: yellow;
  display: inline-block;
}

.slider {
  width: 100px; /* 滑块固定宽度 */
  height: 50px;
  background: pink;
  display: inline-block;
  vertical-align: top;
}

.blue-box {
  width: 50px;
  height: 50px;
  background: blue;
}

.container:hover .hover-wrapper {
  width: 150px; /* 黄色盒子宽度 + 滑块宽度 */
}

原理说明 #

• 将黄色盒子和滑块放在同一个容器(.hover-wrapper)中，初始时容器宽度等于黄色盒子宽度，通过overflow:hidden隐藏滑块
• 鼠标 hover 时，给.hover-wrapper的宽度设置过渡动画，从50px逐步增加到150px（黄色盒子+滑块的总宽度）
• 容器宽度平滑扩展的过程中，既会逐步显示滑块，同时也会同步推动右侧的蓝色盒子，实现全程连贯的动画效果

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