为什么设置元素宽度的动画会导致同一行中的其他元素稍微抖动

Question

我有一行元素和一个CSS悬停动画，它会使悬停的元素扩展到原来宽度的两倍。如果将鼠标悬停在两个相邻元素之间，效果会很好，但如果您同时在多个元素上快速移动鼠标，则无论出于何种原因，行中更靠下的元素都会前后移动几个像素。

本Fiddle中的示例-https://jsfiddle.net/p8z7c0jy/2/

1. 尝试在任意两个形容词元素之间快速移动鼠标(例如。介于红色和橙色之间(-一切正常。这两个中的一个变得更大，其他元素变得更小，其他元素保持不变尺寸
2. 现在，试着将鼠标快速移动两个元素(例如，红色到黄色(一段距离——你会注意到紫色和蓝色元素的大小略有变化，而它们不应该——它们似乎有点抖动，这看起来很难看，很刺激

一开始我认为CSS宽松可能会导致这个问题(不同的元素以不同的速度在"宽"one_answers"窄"状态之间动画(，但即使使用线性动画宽松(如前面提到的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>

Answer 1

如果你想要一个在悬停时不会立即触发的平滑过渡(这会导致"急动"(，你应该在过渡中添加一个延迟，这样在元素之间移动就不会产生不希望的效果。

请参阅：转换延迟属性

如果你想要一个更美观的过渡，我建议使用立方体边框。