切換動畫播放狀態的問題

我試圖用按鈕啓動/停止旋轉動畫。不知道我在做錯什麼。如果可能的話，我寧願避免使用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

切換動畫播放狀態的問題

回答

相關問題