我有一组元素，每个元素都排成一行。这些的数量、规模等是动态的。我希望它们在屏幕上无限循环地从一侧传递到另一侧，因此当一个元素离开一侧时，它会再次从另一侧进入，如下所示:
Here is a Codepen Illustrating the above example .想象黑盒子是视口(viewport)，所以您看不到它外面。
What is the easiest way to implement this conveyor belt/treadmill approach?
我已经尝试了多种实现方法，但一直无法找到可靠、流畅且灵活的解决方案来解决看似非常简单的问题。我碰壁了，你会怎么做？
我只是在寻找概念、库等。
GreenSock 库可以很好地解决这个问题吗？
如果这太模棱两可了，谁能给我指出一个更合适的地方去问？
谢谢。
最佳答案
我不知道是什么让你说它“似乎是一个非常简单的问题”，因为(对我而言)它显然不是。让我们分解一下:
- 让传送带移动(我假设你为此移动了传送带容器)。
- 每当元素完全离开屏幕时触发。
- 在腰带的另一端移动 DOM 中的该元素，同时调整腰带的位置，使腰带动画中看不到 DOM 的变化，这应该保持平滑。
这就是我想要的方式，但是当 DOM 发生变化时，动画可能会交错/闪烁，尤其是当您同时在页面中运行其他动画时。如果发生这种情况，您可能希望克隆元素而不是移动它们，并且仅在克隆渲染完成后删除原始元素。它可能“看起来”(原文如此)像同一件事，但浏览器会一个接一个地执行它们，而不是同时执行。它有时会有所帮助。
我天生就是一个好奇的人，所以我已经计划在一天结束时解决这个问题。如果我发现任何值得注意的事情，或者如果我想出了另一种方法，我会进行更新。
关于javascript - 在无限循环中为通过视口(viewport)的元素设置动画的最佳方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39689794/