React/CSS transform: translate() 过渡会导致一些元素在过渡期间位置偏移。

Question

当使用 transform: translate() 将 flexbox 中所有元素移动时，某些元素在过渡期间会出现位置不正确的情况，然后才会固定在正确位置。我发现这个问题似乎是从第13个元素开始出现的。

更新：目前我已经发现了这个问题只会在 Chrome 和 Edge 中出现，而在 Firefox 中则正常工作。我还简化了代码，并对之前的代码进行了一些更改。此外，当使用 transform 进行偏移时，问题似乎会越来越严重。

更新：问题似乎是由于重新计算图像大小/位置所引起的。当我将 overflow: hidden 添加到图像中时，问题消失了。但我不知道为什么会奏效...

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则用于单个项目。

转换期间一个项目错位

我尝试删除CSS文件中几乎所有的内容。只保留item-carousel不变，但问题仍然存在，所以我不认为问题出在那里。

- Panibo

---

我认为你应该将 .item-container 中的 padding: 5px 替换为 .item-carousel。 - nuser137

padding: 5px 的位置正确。我使用了 box-sizing: border-box，这样可以根据元素的实际宽度和 padding 来计算宽度。这样当我将其设置为 100% 时，它将恰好移动元素的宽度 + 我想要的任何间距（包括 padding）。 - Panibo

Answer 1

使用 framer-motion 进行布局动画非常不错。

否则，您应该提供一个最小的可重现环境。

- yang zhou