ボタンをクリックすると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" 
 
\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）のクラス.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

Answer 2

：

1）まず最初<path>要素から既存の<path class="path"を削除します。ここでの「無限」は、アニメーションを無限回繰り返すと言う - あなたはボタン）が後にonclickの

2本を追加するには、animation: dash 5s linear infinite;からあなたアニメーションの繰り返し回数を変更したいです。 ）

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

animation: dash 5s linear 1;に続いて最初のクリック後、ボタンを無効にすることを変更して、あなたは

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

シンプルな..あなたはすべての問題に直面した場合、私に教えてください可能性があります。

Answer 3

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

チェックこの..それはuは

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