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

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