我正在开发一个React应用程序，该应用程序显示在给定时间段内的地铁交通。它显示了在地铁地图上移动的小火车，每列火车都有自己的animateMotion，因为它们具有不同的速度和起飞时间。
我需要做的是，当用户要求使用不同的时间段时，停止所有animateMotion正在进行中，以用新的时间段替换它们。
问题：如果我删除它们，我会遇到DOM问题：
Uncaught DOMException: Failed to execute 'insertBefore' on 'Node'。
如果我信任React更换数据并更新组件，之前的动画要么没有停止（它们仍然污染图形），要么不再重新启动。
这是一个说明前一种情况的代码图（感谢Radu Luncasu）：https://stackblitz.com/edit/multiple-trains
是否可以使用SMIL，React或CSS 3执行此操作？或者我需要看看第三方图书馆吗？
答案 0 :(得分：1)
更新：看起来问题是由动画未在反应渲染时重新启动引起的。我已经修改了codepen所以它现在调用了
document.getElementById("ani-circle").beginElement();
在设置新状态之前。我承认，这是一种愚蠢的做法，但却无法想到其他任何事情。我猜你可以使用ref而不是getElementById来减少hacky。
看看这个codepen，我试着做你所描述的基础知识并做出反应似乎做得很好。也许你会在那里找到一些可以帮助你的东西，或者你可以复制这个问题，这样有人可以提供帮助。