单击时使用 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>