切换动画播放状态的问题

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

在此先感谢

来源

2013-05-05 thestinkingbishop

你想在页面加载或停止时启动它吗？检查 - http://jsfiddle.net/uc9c5/2/ – lifetimes 2013-05-05 21:50:06

这是完美的。我做错了什么？我所看到的唯一轻微的事情就是它在暂停之前闪烁了第一帧。这是不可避免的吗？ – thestinkingbishop 2013-05-05 21:52:51

首先，在你的jsfiddle你在你的jsfiddle时，你应该使用No wrap in <head> section选项已经运行它onLoad。

其次，我对CSS进行了更改 - 即将-webkit-animation-play-state:running;更改为作为初始状态，准备开始动画的函数调用。

Here's a working jsFiddle.

编辑：至于闪烁，好像可悲的是这是一个webkit bug。

来源

2013-05-05 21:56:47 lifetimes

ahhhh闪烁的耻辱。不管怎么说，还是要谢谢你。这只会在铬，但是是吗？为了兼容，我必须添加：“-moz-animation：旋转2s线性无限; -o-animation：旋转2s线性无限; 动画：旋转2s线性无限;”我将如何改变JS？ – thestinkingbishop 2013-05-05 22:20:48

如果你知道别人的语法，你可以将它们包含在你的css/javascript中，就像你包含webkit的版本 – lifetimes 2013-05-05 22:52:06

不适用于iOS 8.1 ...圆圈不断转动，动画播放状态为完全被忽略。上帝该死你苹果！ – Warface 2014-12-08 16:06:06

有在你的代码一些错误。点击不会被触发。这应该工作： 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-05 21:56:39 Mircea

只是想知道为什么我的回答是第一次被接受，并且之后未被接受。噢，好吧 – Mircea 2013-05-05 22:18:31

不好意思，谢谢！ – thestinkingbishop 2013-05-05 22:22:16

Zennith在发布完整答案之前实际评论说，所以我认为他们应得到充分的信任。对不起，如果我造成进攻 – thestinkingbishop 2013-05-05 22:31:53

切换动画播放状态的问题

回答

相关问题