Question

我正试图用按钮开始/停止旋转动画。不知道我做错了什么。如果可能的话，我宁愿避免使用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/

提前致谢

Answer 1

首先，在你的jsFiddle中，当你应该使用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。

Answer 2

您的代码中存在少量错误。点击不会被触发。这应该工作： http://jsfiddle.net/uc9c5/3/

document.getElementById('button').onclick = function(){

    var spinner = document.getElementById("spinner");

    if (!spinner.style.webkitAnimationPlayState) {        
        spinner.style.webkitAnimationPlayState = 'paused';
    } else if (spinner.style.webkitAnimationPlayState === 'paused') {
        spinner.style.webkitAnimationPlayState = 'running';      
    } else if (spinner.style.webkitAnimationPlayState === 'running') {
        spinner.style.webkitAnimationPlayState = 'paused';       
    }
}

切换动画播放状态的问题

2 个答案: