Fatal编程技术网
  • javascript/
  • Javascript 切换动画播放状态时出现问题

Javascript 切换动画播放状态时出现问题

javascript css

Javascript 切换动画播放状态时出现问题,javascript,css,Javascript,Css,我正在尝试使用按钮启动/停止旋转动画。不知道我做错了什么。如果可能的话，我宁愿避免使用JQuery……我已经在我的头上了 <head> <style type='text/css'> #spinner { -webkit-animation: spin 2s linear infinite; -webkit-animation-play-state:running; border: 1px dashed; border-radius

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


#纺纱机{
-webkit动画：旋转2s线性无限；
-webkit动画播放状态：正在运行；
边框：1px虚线；
边界半径：50%；
宽度：5em；
身高：5公分；
利润率：2米自动；
填料：2米；
}
@-webkit关键帧旋转{
从{
-webkit变换：旋转（0度）；
}
到{
-webkit变换：旋转（360度）；
}
}
//  
快速旋转
启动/停止

提前感谢

您的代码中几乎没有错误。不会触发单击。这应该起作用：

首先，在jsFiddle中，您在jsFiddle中运行它
onLoad
，而您本应使用
No wrap-in部分
选项

第二，我对你的CSS做了修改，也就是说，修改了
-webkit动画播放状态：running至
-webkit动画播放状态：暂停
作为初始状态，准备好函数调用以启动动画




编辑：关于闪烁，很遗憾，这是一个
您希望它在页面加载时启动还是停止？检查这个-太好了。我做错了什么？！我看到的唯一一点是，它在暂停前会在第一帧中闪烁。这是不可避免的吗？只是想知道为什么我的回答最初被接受，后来又被拒绝。哦，wellZennith实际上在发布完整答案之前发表了评论，所以我认为他们应该得到充分的赞扬。对不起，如果是我引起的冒犯好的，没问题。我觉得我的代码有问题。啊，真是太可惜了。无论如何，谢谢你。这将只在铬虽然是吗？为了使兼容，我必须添加：“-moz动画：spin 2s linear infinite；-o动画：spin 2s linear infinite；动画：spin 2s linear infinite；”我需要如何更改JS？如果您知道其他的语法，您只需将它们包含在css/javascript中，就可以知道您包含webkit版本的方式在iOS 8.1上不起作用。。。圆圈继续旋转，动画播放状态完全被忽略。该死的苹果！ios safari中仍然存在问题。一旦你演奏，你就不能再暂停了。使用safari检查ios设备中的JSFIDLE。

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';       
    }
}