用javascript更改-webkit动画播放状态

Question

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

Answer 1

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

在示例代码，clickDiv是div点击和animationDiv是其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); 
})? 

Demo Here

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>

更改不同动画的注释行