嗨,我一直在试图弄清楚如何通过单击另一个 div 将我的 css3 -webkit-animation-play-state 从暂停更改为运行。有谁知道我会怎么做?我假设我需要使用 JavaScript。
问问题
7023 次
2 回答
3
除非您使用 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);
})?
于 2012-04-15T00:41:53.863 回答
0
看看 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>
更改不同动画的注释行
于 2016-12-22T16:38:27.950 回答