Question

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

Answer 1

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

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

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>

更改不同动画的评论行

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

2 个答案: