クリック時のCSSアニメーションのリフレッシュ

Question

"スピン"と表示されているボックスをクリックして360°回転させようとしています。私はCSS3のキーフレームアニメーションを使用し、CSSをjQuery関数に適用しましたが、符号はアニメーションを1回だけトリガします。 2回目のクリックでは回転しません。

HTML：

<div id="box"></div> 

<a class="activate">spin</a> 

のjQuery：

$(document).ready(function(){ 
$(".activate").click(function() { 
    $('#box').css({ 
     "-webkit-animation-name":"cycle", 
     "-webkit-animation-duration":"2s", 
     "-webkit-animation-iteration-count":"1", 
     "-webkit-animation-fill-mode" : "forwards", 

     "animation-name":"cycle", 
     "animation-duration":"2s", 
     "animation-iteration-count":"1", 
     "animation-fill-mode" : "forwards", 

     "-moz-animation-name":"cycle", 
     "-moz-animation-duration":"2s", 
     "-moz-animation-iteration-count":"1", 
     "-moz-animation-fill-mode" : "forwards", 
    }); 
}); 
}); 

CSS：

#box { 
    width:100px; 
    height:100px; 
    background-color:black; 
    margin-bottom:10px; 
} 

@-webkit-keyframes cycle { 
    from {-webkit-transform: rotate(0deg);} 
    to {-webkit-transform: rotate(360deg);} 
} 

@keyframes cycle { 
    from {transform: rotate(0deg);} 
    to {transform: rotate(360deg);} 
} 

@-moz-keyframes cycle { 
    from {-moz-transform: rotate(0deg);} 
    to {-moz-transform: rotate(360deg);} 
} 

.activate { 
    margin-top:5px; 
    padding:3px 5px; 
    background-color:#333; 
    color:#eee; 
    cursor:pointer; 
} 

Here's my JSFiddle.

私はすべてのStackOverflowの上に見て、何も見つからなかったしました。 addClassを使用してアニメーションをリセットする必要がありますか？

ご協力いただければ幸いです！

Answer 1

uはこれを達成することができます最善の方法です。

アニメーション

#box.active { 
    -webkit-animation-name: cycle; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-fill-mode: forwards; 
    animation-name: cycle; 
    animation-duration: 2s; 
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    -moz-animation-name: cycle; 
    -moz-animation-duration: 2s; 
    -moz-animation-iteration-count: 1; 
    -moz-animation-fill-mode: forwards; 
} 

のためのアクティブなクラスを作成し、それが魅力のように働いたjQueryの

$(document).ready(function() { 
    $(".activate").click(function() { 
     $('#box').addClass('active'); 
     $('#box').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){ 
     $(this).removeClass('active'); 
     }); 

    }); 
}); 

jsfiddle

Answer 2

既にstyleが定義されているため、2回目はアニメーション化されません。 styleにCSSを割り当てる前にそれをクリアしてください。何らかの理由で

style削除や追加が再び瞬時にそれが働いていたので、setTimeoutを入れて持っていなかった場合。あなたがstyleを再割り当てする直前にalertを置くとイベントが機能します。ここで

$(document).ready(function(){ 
 
    $(".activate").click(function() { 
 

 
     // Find target element 
 
     var targetElement = document.getElementById('box') 
 

 
     // Remove style attribute to clear previous animation 
 
     targetElement.removeAttribute('style'); 
 

 
     // setTimeout is used to fix unknown reason that needs a halt. 
 
     // An 'alert' also makes it working 
 
     setTimeout(function(){ 
 

 
     // Use target element instead of finding element again by jQuery selector 
 
     $(targetElement).css({ 
 
      "-webkit-animation-name":"cycle", 
 
      "-webkit-animation-duration":"2s", 
 
      "-webkit-animation-iteration-count":"1", 
 
      "-webkit-animation-fill-mode" : "forwards", 
 

 
      "animation-name":"cycle", 
 
      "animation-duration":"2s", 
 
      "animation-iteration-count":"1", 
 
      "animation-fill-mode" : "forwards", 
 

 
      "-moz-animation-name":"cycle", 
 
      "-moz-animation-duration":"2s", 
 
      "-moz-animation-iteration-count":"1", 
 
      "-moz-animation-fill-mode" : "forwards", 
 
     }); 
 

 
     }, 0); 
 

 
    }); 
 
});

#box { 
 
    width:100px; 
 
    height:100px; 
 
    background-color:black; 
 
    margin-bottom:10px; 
 
} 
 

 
@-webkit-keyframes cycle { 
 
    from {-webkit-transform: rotate(0deg);} 
 
    to {-webkit-transform: rotate(360deg);} 
 
} 
 

 
@keyframes cycle { 
 
    from {transform: rotate(0deg);} 
 
    to {transform: rotate(360deg);} 
 
} 
 

 
@-moz-keyframes cycle { 
 
    from {-moz-transform: rotate(0deg);} 
 
    to {-moz-transform: rotate(360deg);} 
 
} 
 

 
.activate { 
 
    margin-top:5px; 
 
    padding:3px 5px; 
 
    background-color:#333; 
 
    color:#eee; 
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="box"></div> 
 

 
<a class="activate">spin</a>