javascript - 使用 javascript 更改 -webkit-animation-play-state

Question

嗨，我一直在试图弄清楚如何通过单击另一个 div 将我的 css3 -webkit-animation-play-state 从暂停更改为运行。有谁知道我会怎么做？我假设我需要使用 JavaScript。

Answer 1

除非您使用 JavaScript，否则我认为您无法做到这一点。使用 JavaScript，您必须获取style.webkitAnimationPlayState要更改的元素的 。如果是空字符串，则将其设置为初始值，即"running".

在示例代码中，clickDiv是您单击的 div 并且是正在更改animationDiv的 div ：webkit-animation-play-state

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>

更改不同动画的注释行