javascript - -webkit-animation-play-state を JavaScript で変更する

Question

こんにちは、別の div をクリックして css3 -webkit-animation-play-state を一時停止から実行に変更する方法を見つけようとしています。誰も私がこれを行う方法を知っていますか?? JavaScriptを使用する必要があると思います。

Answer 1

JavaScriptを使わないとできないと思います。JavaScriptを使用すると、style.webkitAnimationPlayState変更する要素のをフェッチする必要があります。空の文字列の場合は、最初の値である。に設定されます"running"。

サンプルコードでclickDivは、はクリックしanimationDivたdivでwebkit-animation-play-stateあり、変更されるdivです。

clickDiv.addEventListener("click", function(){
    if (animationDiv.style.webkitAnimationPlayState == "paused") {
        animationDiv.style.webkitAnimationPlayState = "running";
    }else if(animationDiv.style.webkitAnimationPlayState == "running" || animationDiv.style.webkitAnimationPlayState == ""){
        animationDiv.style.webkitAnimationPlayState = "paused"; // assuming you want to toggle
    }
    console.log(animationDiv.style.webkitAnimationPlayState);
})?

こちらのデモ

Answer 2

http://jsfiddle.net/JCzpd/37/を見てください

var animationDiv = document.getElementById("aD");
var clickDiv = document.getElementById("cD");
clickDiv.addEventListener("click", function(){
    if (animationDiv.style.animation == "") {
animationDiv.style.animation = " anim .5s forwards";
//animationDiv.style.animation = " anim running  .1s infinite";
    }else{
animationDiv.style.animation = ""; // assuming you want to toggle
    }
});

 #aD{ background-color:green;
 height:30px;
 margin:2px 0 5px 2px;}
 #cD{background-color:blue;}
@keyframes anim{
   0%{ background-color:green;}
  100%{ background-color:red;}
}
#aD:hover{animation: anim 1s infinite;
cursor:pointer;}

<div id="aD">animated div</div>
<div id="cD">click div</div>

別のアニメーションのコメント行を変更する