当使用transform移动flexbox中的所有元素时：translate（）某些元素在过渡过程中出现在不适当的位置，然后捕捉到位。我数了一下，这个问题出现的第一个元素是第13个。
更新：到目前为止，我发现这个问题发生在Chrome和Edge上。但在Firefox上，它就像预期的那样工作。我还简化了代码，因此我将稍微更改之前的代码。而且，项目偏移的距离越远，问题就越严重。
更新：问题似乎是由重新计算图像大小/位置引起的。当我添加溢出时：隐藏到图像中，问题就消失了。不知道为什么会这样...
React代码：

<div
          key={index}
          className="item-container"
          tabIndex={active ? 0 : undefined}
          style={{
            transform: `${activeItem < itemRefs.current.length - 4 ? `translateX(-${activeItem * 100}%)` : undefined}`,
            
          }}
          ref={(ref) => (itemRefs.current[index] = ref)}
        >
          <img src={url}/>
        </div>

CSS：

.item-carousel {
  height: 30%;
  display: flex;
  overflow-x: hidden;
}
.item-container{
  display: flex;
  box-sizing: border-box;
  min-width: 20%;
  max-width: 20%;
  max-height: 250px;
  padding: 5px;
transition: transform 0.25s ease;
}

item-carousel是包含我移动的所有项目的主flexbox，item-container用于单个项目。
An item out of place during transition
我试过删除CSS文件中几乎所有的内容。只保持项目轮播，但问题仍然发生，所以我不认为这是问题所在。