Javascript 为无限循环中通过视口的元素设置动画的最佳方法

我有一组元素，每一个元素旁边都有一行。它们的数量、规模等是动态的。我希望它们在屏幕上以无限循环的方式从一侧传递到另一侧，这样当一个元素离开一侧时，它又从另一侧进入，如下所示：

。假设黑框是视口，因此无法看到它的外部

What is the easiest way to implement this conveyor belt/treadmill approach?

我已经尝试了几种方法来实现这一点，但我一直在寻找一个可靠、平滑、灵活的解决方案，来解决一个看起来非常简单的问题。我撞到墙了，你会怎么做

我只是在寻找概念、图书馆等

格林斯托克图书馆能很好地解决这个问题吗

如果这太含糊不清，有人能告诉我一个更合适的地方吗

---

谢谢。

我不知道是什么让你说这“似乎是一个非常简单的问题”，因为（对我来说）它显然不是。让我们把它分解一下：

使传送带移动（我假设您为此移动传送带容器）

当元素完全离开屏幕时触发

在传送带的另一端移动DOM中的元素，同时调整传送带的位置，使DOM中的更改在传送带动画中不可见，并应保持平滑

这就是我的想法，但是在DOM中进行更改时，动画可能会交错/闪烁，特别是当页面中同时运行其他动画时。如果发生这种情况，您可能希望克隆元素而不是移动它们，并且仅在克隆渲染完成后删除原始元素。它可能“看起来”（原文如此）像同一件事，但浏览器会一个接一个地做，而不是同时做。有时会有帮助

---

我天生就是一个好奇的人，所以我已经计划在一天结束时摆弄一下这个。如果我发现任何值得注意的地方，或者如果我想出了另一种方法，我会更新。

我喜欢这个想法，只要元素保留在DOM中，并且只更改父带和子元素的translate3d，IMO性能应该是好的。我的理解是，在DOM中添加/删除元素的成本很高，但更改属性的成本却不高，尤其是在使用translate3d启用硬件加速时。停留在

窗口中。requestAnimationFrame

也应最小化跳跃/跳过。但这是我在大多数实现中遇到的主要问题，所以这绝对是一个值得关注的问题。我将很快用一个新的代码笔更新它。请记住，为简单起见，这些元素的大小/数量/速度是恒定的，但在最终形式中，它们将是非常动态的，因此有时只有当速度或元素计数处于特定值时，才会跳转。因此，它需要能够处理移动过程中变薄和以其他方式变化的元素。但不应改变其工作原理。不确定它是否适合您的情况，但GSAP的最新更新，即，带来了一些您可能正在寻找的功能。。