1

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

4

2 回答 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 回答