Javascript 单击按钮即可开始SVG路径动画

我有一个SVG路径动画，目前处于无限循环中。我希望动画是不可见的，直到它被点击事件触发，然后一旦动画完成（一次，而不是无限），按钮应该不再工作

我添加了一个测试按钮，但动画似乎仍然会在页面加载后立即播放，并且按钮对其没有影响

$（“#按钮”）。单击（函数（）{
$（'.虚线'）.toggleClass（'path'）；
});
。虚线{
行程数组：10；
}
.路径{
笔划阵列：1000；
行程偏移量：1000；
动画：直线无限；
}
@关键帧破折号{
从{
行程偏移量：1000；
}
到{
笔划偏移：0；
}
}
您需要对代码进行以下小改动：

1） 首先删除已经存在的

检查这个。。这应该会有帮助

对于禁用按钮u，可以使用此代码

$("#button").click(function() {
          $('.path').css("animation"," dash 5s linear");
          $(this).attr("disabled","disabled");
         });

a） 清空类
.path
，但将其保留在那里：

.path { }

b） 通过将动画属性中的“无限”替换为“1”，将从
.path
中删除的动画属性添加到新的css类中

.path-animation {
     stroke-dasharray: 1000;
     stroke-dashoffset: 1000;
     animation: dash 5s linear 1;
}

c） 使用以下jquery获得所需的结果：

$("#button").click(function() {
   $('.path').attr('class', 'path path-animation');
   //5 secs delay to complete the animation before removing it and disabling the button.
   setTimeout(function() {
      $('.path').attr('class', 'path');
      $("#button").attr("disabled","disabled");
   }, 5000);
});

示例代码：
添加了jquery.min.js，而且我在页面上没有看到js代码。忘记添加$（文档）。准备就绪（函数（）{。感谢您的帮助！
.path-animation {
     stroke-dasharray: 1000;
     stroke-dashoffset: 1000;
     animation: dash 5s linear 1;
}

$("#button").click(function() {
   $('.path').attr('class', 'path path-animation');
   //5 secs delay to complete the animation before removing it and disabling the button.
   setTimeout(function() {
      $('.path').attr('class', 'path');
      $("#button").attr("disabled","disabled");
   }, 5000);
});