单击按钮开始 SVG 路径动画

Question

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

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

$("#button").click(function() {
  $('.dashed').toggleClass('path');
});

.dashed{
  stroke-dasharray: 10;

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

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
<path class="path" fill="none" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="10" d="M23.742,10.709
	c-2.305,23.611-8.81,46.563-9.021,70.829c-0.252,28.966,22.237,43.666,47.06,55.482c23.642,11.255,42.368,15.766,68.461,16.631
	c19.993,0.663,40.08,2.97,59.853-1.723c23.301-5.531,45.542-17.598,66.978-27.933c19.248-9.281,38.831-21.86,41.946-45.201
	c5.539-41.51-54.993-47.073-81.885-42.17C159.05,47.212,89.37,104.633,77.387,164.629c-5.896,29.522-4.312,60.884,12.703,86.354
	c19.17,28.697,49.512,49.927,78.596,67.591"/>

<path class="dashed" fill="none" stroke="white" stroke-width="4" stroke-linejoin="round" stroke-miterlimit="10" d="M23.742,10.709
	c-2.305,23.611-8.81,46.563-9.021,70.829c-0.252,28.966,22.237,43.666,47.06,55.482c23.642,11.255,42.368,15.766,68.461,16.631
	c19.993,0.663,40.08,2.97,59.853-1.723c23.301-5.531,45.542-17.598,66.978-27.933c19.248-9.281,38.831-21.86,41.946-45.201
	c5.539-41.51-54.993-47.073-81.885-42.17C159.05,47.212,89.37,104.633,77.387,164.629c-5.896,29.522-4.312,60.884,12.703,86.354
	c19.17,28.697,49.512,49.927,78.596,67.591"/>
</svg>


<input type="button" id="button" value="Animate" />

Answer 1

您需要对代码进行以下小改动：

1) 首先从您的第一个<path> 元素中删除已经存在的<path class="path"。您希望按钮稍后在单击时添加它

2) 从animation: dash 5s linear infinite; 更改您的动画迭代计数 - 这里的“无限”表示无限次迭代动画。将其更改为animation: dash 5s linear 1;

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

3）然后在第一次点击后禁用按钮，你可以

$('#button').on('click', function() {
  $('.dashed').addClass('path');
  $(this).prop('disabled', true);
});

简单..如果您遇到任何问题，请告诉我。

Answer 2

https://jsfiddle.net/krishna9960/atg5m6ym/7723/

检查这个..它应该有帮助...

要禁用按钮，您可以使用此代码

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

Answer 3

a) 清空 .path 类，但保留它：

.path { }

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

.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);
});

示例代码：http://codepen.io/Nasir_T/pen/yVNxQG