我正在尝试使用按钮启动/停止旋转动画。不知道我在做什么错。如果可能的话，我宁愿避免使用JQuery。...我已经超出了头脑。
<head>
<style type='text/css'>
#spinner {
-webkit-animation: spin 2s linear infinite;
-webkit-animation-play-state:running;
border: 1px dashed;
border-radius: 50%;
width: 5em;
height: 5em;
margin: 2em auto;
padding: 2em;
}
@-webkit-keyframes spin {
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(360deg);
}
}
</style>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
function spin() {
var spinner = document.getElementById("spinner");
if (spinner.style.webkitAnimationPlayState === 'running') {
spinner.style.webkitAnimationPlayState = 'paused';
document.body.className = 'paused';
} else {
spinner.style.webkitAnimationPlayState = 'running';
document.body.className = '';
}
}
}//]]>
</script>
</head>
<body>
<div id="spinner">spin!</div>
<button onClick="spin();">start/stop</button>
</body>
http://jsfiddle.net/uc9c5/1/
提前致谢
最佳答案
首先，在您应该使用onLoad选项的情况下，在jsFiddle中运行它No wrap in <head> section。
其次，我对您的CSS进行了更改-即将-webkit-animation-play-state:running;更改为-webkit-animation-play-state:paused;作为初始状态，为函数调用启动动画做准备。
Here's a working jsFiddle.
编辑：关于闪烁，可悲的是它是一个webkit bug。
关于javascript - 切换动画播放状态的问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16389438/