为什么动画元素宽度会导致同一行中的其他元素有点抖动？答案

【问题标题】：Why animating the element width causes other elements in the same row to jerk a little?为什么动画元素宽度会导致同一行中的其他元素有点抖动？
【发布时间】：2021-07-21 23:32:25
【问题描述】：

我有一排元素和一个 CSS 悬停动画，它使悬停的元素扩展为原始宽度的两倍。如果将鼠标悬停在两个相邻元素之间，它可以正常工作，但是如果您一次将鼠标快速移动到多个元素上，则该行下方的元素无论出于何种原因都会前后晃动几个像素。

这个小提琴中的例子 - https://jsfiddle.net/p8z7c0jy/2/

尝试在任意两个相邻元素之间快速移动鼠标（例如红色和橙色之间） - 一切正常。这两个之一变大，其他变小，其他元素保持不变大小。
现在尝试将鼠标快速移动一段距离两个元素（例如，红色到黄色） - 您会注意到紫色和蓝色元素的大小略有变化，但它们不应该 - 它们似乎有点晃动，看起来很难看和恼人的。

起初我认为可能是 CSS 缓动导致了这个问题（不同的元素以不同的速度在“宽”和“窄”状态之间进行动画处理），但即使使用线性动画缓动也会发生这种情况（如前面提到的 Fiddle 所示） .

谁能解释一下为什么会发生这种情况以及如何防止动画过程中进一步的元素抖动？

.wrapper {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: row;
}
.child {
  flex: 1;
  transition: all 0.2s linear;
}
.child:hover {
  flex: 2;
}

.red {background: red;}
.orange {background: orange;}
.yellow background: yellow;}
.purple {background: purple;}
.blue {background: blue;}

<div class="wrapper">
  <div class="child red">
    Element 1
  </div>
    <div class="child orange">
    Element 2
  </div>
    <div class="child yellow">
    Element 3
  </div>
    <div class="child purple">
    Element 4
  </div>
    <div class="child blue">
    Element 5
  </div>
</div>

【问题讨论】：

对于这样的问题，重要的是要提及您使用的浏览器（及其版本）和操作系统。在 macOS Safari 14.0.2 上，您的示例运行时没有任何“抖动”，而是相当流畅。

标签： css transition

【解决方案1】：

如果您想要一个不会在悬停时立即触发的平滑过渡（这会导致“抖动”），您应该为过渡添加一个延迟，这样在元素之间移动就不会产生不希望的效果。

见：transition-delay property

如果你想要一个更美观的过渡，我建议使用cubic-bezier.

【讨论】：