在无限循环

Question

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

Here is a Codepen Illustrating the above example。想象一下，黑匣子是视口，所以你看不到它。

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

我已经尝试了几种方法来实现这一点，但我很难找到一个可靠，流畅，灵活的解决方案来解决看似非常简单的问题。我撞墙了，你会怎么做？

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

GreenSock图书馆可以很好地解决这个问题吗？

如果这太模糊了，任何人都可以指向一个更合适的地方询问吗？

感谢。

Answer 1

我不知道是什么让你说出来＆＃34;似乎是一个非常简单的问题＆＃34; ，因为（对我而言）它显然不是。让我们分解一下：

1. 让传送带移动（我假设您为此移动了传送带容器）。
2. 每当元素完全离开屏幕时触发。
3. 将该元素移动到腰带另一端的DOM中，同时调整腰带位置，以便在腰带动画中看不到DOM的变化，这应保持平滑。

这就是我的目标，但是当DOM发生变化时，动画可能会错开/闪烁，特别是如果您同时在页面中运行其他动画。如果发生这种情况，您可能希望克隆元素而不是移动它们，并且仅在克隆渲染完成后删除原始元素。它可能＆＃34;似乎＆＃34; （原文如此），但浏览器会一个接一个地而不是同一时间执行它们。它有时会有所帮助。

我天生就是一个好奇的家伙，所以我已经计划在一天结束的时候做一个小提琴。如果我发现任何值得注意的事情，或者我想出了另一种方法，我会更新。