CSS 转换在 insertBefore 之后未触发

Question

我正在尝试创建一个循环播放的水平旋转木马。

您可以在此处查看代码：https://codepen.io/nobitta/pen/xNOyrj

此刻我卡住了。我设法让它工作，但是当您单击 "next".

时，模仿向右移动的 CSS 过渡不会触发

我已经做了一些研究，有人说这与浏览器优化有关，设置超时或调用 offsetWidth 或 getBoundingRect() 应该可以解决问题，因为它会强制浏览器重新-使成为。然而，即使有了这些技巧，我还是无法让它发挥作用...

我是不是做错了什么或者遗漏了什么？我应该怎么办？

提前致谢~

Answer 1

我通过尝试 margin-left 属性.

设法修复了它

我敢打赌，当我将最后一个滑块的项目放在前面时，由于新元素的大小和它占据的 space，它自然会向右移动。因此，我决定将其移回以掩盖插入移位。我对附加项目遵循相同的推理。

您可以查看问题中的代码笔以了解更多详细信息。

我希望这对某人有所帮助。