2

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

提前致谢

4

2 回答 2

2

首先，在您的 jsFiddle 中，onLoad当您应该使用该No wrap in <head> section选项时，您正在 jsFiddle 中运行它。

其次，我对您的 CSS 进行了更改 - 即更改-webkit-animation-play-state:running;为-webkit-animation-play-state:paused;初始状态，为函数调用以启动动画做好准备。

这是一个工作的jsFiddle。

编辑：关于闪烁，可悲的是它似乎是一个webkit 错误。

于 2013-05-05T21:56:47.833 回答
0

您的代码中几乎没有错误。未触发点击。这应该工作：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';       
    }
}
于 2013-05-05T21:56:39.993 回答