SVG-Pfad-Animation auf Knopfdruck zu beginnen

Question

Ich habe eine SVG-Pfadanimation, die im Moment auf einer Endlosschleife ist. Ich möchte, dass die Animation so lange unsichtbar bleibt, bis sie durch ein Klickereignis ausgelöst wird. Nach Abschluss der Animation (einmal, nicht unendlich) sollte die Schaltfläche nicht mehr funktionieren.

Ich habe eine Testschaltfläche hinzugefügt, aber die Animation scheint immer noch abgespielt zu werden, sobald die Seite geladen ist und die Schaltfläche keine Auswirkung hat.

$("#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" 
 
\t 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 
 
\t 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 
 
\t 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 
 
\t 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 
 
\t 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 
 
\t 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 
 
\t 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 
 
\t 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 
 
\t c19.17,28.697,49.512,49.927,78.596,67.591"/> 
 
</svg> 
 

 

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

Answer 1

a) leer die Klasse .path aber dort halten:

.path { } 

b) fügen Sie die Animationseigenschaften Sie entfernt von der .path in eine neue CSS-Klasse mit dem Ersetzen von 'unendlich' von der Animationseigenschaft auf '1'.

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

c) Verwenden Sie die folgende Jquery um die Ergebnisse zu erzielen, die Sie benötigen:

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

Beispielcode: http://codepen.io/Nasir_T/pen/yVNxQG

Answer 2

Sie müssen diese kleinen Änderungen an Ihrem Code tun:

1) entfernen Zum einen die bereits bestehende <path class="path" von Ihrem ersten <path> Element. Sie wollen, dass die Schaltfläche diese

2) Ändern Sie Iteration Ihre Animation Zählung Onclick später hinzufügen von Ihrem animation: dash 5s linear infinite; - Die ‚unendliche‘ hier sagt die Animation unendlich oft wiederholen. Ändern Sie diesen zu animation: dash 5s linear 1;

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

3) Dann die Taste nach dem ersten Klick zu deaktivieren, Sie könnten

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

Einfach .. Lassen Sie mich wissen, wenn Sie irgendwelche Fragen stellen.

Answer 3

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

prüfen dies .. Es sollte helfen ...

Für die Taste deaktivieren kann u diesen Code verwenden

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