避免在图表上动画重新加载

Question

我想知道是否有任何方法可以避免每次用户单击任何图形变量时为整个图形重新加载动画。

我有一个3行css动画的图形，如果向图形添加新变量，我想保留现有的行不再动画。

Here is the graph: 

https://codepen.io/figu78/pen/QvepyM

嗯，我想保持行动画。我不想要的是重新绘制每一行，每次添加一个新行。我的意思是，如果绿线（50SRU）已经在图中，当我点击黄线（150SRU）时，我不想再次重绘绿线，只有黄线应该做动画。

在此先感谢！

Answer 1

通常情况下，您可以通过将startDuration设置为0来做到这一点，但由于它已经为0，因此您只需更改CSS即可。你必须删除：

-webkit-animation: am-draw 10s; 
    animation: am-draw 10s; 

这样你就不会有任何图形的动画。