Animating an SVG Route to Start at the Press of a Button

Question

I have an SVG path animation that is currently in an infinite loop. I want the animation to be invisible until it is triggered by a click event, and then as soon as the animation is completed (once, not endlessly), the button will no longer work.

I added a test button, but the animation still seems to play immediately after the page loads, and the button does not affect it.

$("#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

a) free the .path class, but save it:

 .path { } 

b) add the animation properties that you removed from the .path to the new css class, replacing “infinity” with the animation property by “1”.

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

c) To achieve the desired results, use the following 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); }); 

Example code: http://codepen.io/Nasir_T/pen/yVNxQG

Answer 2

You need to make these small changes to your code:

1) First remove the existing <path class="path" from your first <path> element. Do you want the button to add this later onclick

2) Change the number of iterations of the animation to animation: dash 5s linear infinite; . Here is an infinite number repeating an endless animation of an animation. Change this to animation: dash 5s linear 1;

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

3) Then, to disable the button after the first click, you can

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

Simple .. Let me know if you encounter any problems.

Answer 3

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

Check it out .. This should help ...

To disable the u button, you can use this code

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