單擊時使用 javascript 加速 CSS 動畫

Question

我制作了這個非常簡單的網頁，它有一個居中的圖像。 當你點擊它時，它開始旋轉。

http://h08.us

現在我正在嘗試使用 JavaScript 來制作它，以便當您再次單擊它時，它開始越來越快地旋轉，我已經看過多個類似的堆棧溢出問題，但我似乎無法讓它工作：

 var img = document.querySelector("#spin") img.addEventListener('click', onClick, false); var deg = 360; function onClick() { deg += 90; var stylesheet = document.styleSheets[0]; var spinRule = stylesheet.cssRules[0]; var spinRule_To = spinRule.cssRules[1]; var spinRule_To_Style = spinRule_To.style; spinRule_To_Style.setProperty("transform:rotate", deg); }

 @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } #tbl { height: 100%; width: 100%; margin: 0; padding: 0; border: 0; } #tbl td { vertical-align: middle; text-align: center; } img:target { animation-name: spin; animation-duration: 4000ms; animation-iteration-count: infinite; animation-timing-function: linear; }

 <table id="tbl"> <tr> <td> <div> <a href="#spin"> <img id="spin" src="http://h08.us/Hob-Cos.png" title="THE MEMES ARE BACK BOIS"> </a> </div> </td> </tr> </table>

Answer 1

如果jquery id 允許，試試這個。

在您的代碼中，您使用var deg增加了旋轉角度，但這不會提高速度，您需要通過每次單擊來減少動畫的持續時間以加速動畫。

 var duration = 4000; $('#spinTrigger').click(function(){ $('#spin').css("animation-duration", duration + 'ms'); duration -= 200; if (duration == 0) { duration = 100; } })

 @keyframes spin { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } } #tbl { height: 100%; width: 100%; margin: 0; padding: 0; border: 0; } #tbl td { vertical-align: middle; text-align: center; } img{ width:300px; } img:target{ animation-name: spin; animation-duration: 4000ms; animation-iteration-count: infinite; animation-timing-function: linear; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="tbl"> <tr> <td> <div> <a href="#spin" id="spinTrigger"> <img id="spin" src="http://h08.us/Hob-Cos.png" title="THE MEMES ARE BACK BOIS"> </a> </div> </td> </tr> </table>