有没有一种方法可以使元素旋转而不用变量告诉它已经旋转了多远？

Question

我有一个实验性的网站可以播放音乐，并且我希望在您点击前进和后退按钮时旋转它们。但是，我也不想让2个变量成为它们已经变了多少，或者没有一个函数使它们与CSS变换属性变得有多远。它们具有过渡效果，以产生悬停效果。我已经尝试过

    backward.classList.add("notrans");
    backward.style.transform = "rotateZ(0deg)";
    backward.classList.remove("notrans");
    backward.style.transform = "rotateZ(-360deg)";

和一些密切相关的东西，并且还有一个setTimeout可以在以后重置它，这对于发布来说太长了。

Answer 1

Animate是您要搜索的。这应该是一个有效的示例：（在FF和Chrome中测试）

/* THIS IS A JAVASCRIPT CLASS THAT ADDS AND
REMOVES THE CSS CLASS FROM YOUR ELEMENT
USING THE ELEMENT'S ID VALUE TO REFERENCE. */

function startStop(strstp) {
  var infinite = document.getElementById("imSpinning");
  var once = document.getElementById("imSpinningOnce");
  
  if(strstp == 1)
  {
    infinite.classList.add("spin");
    once.classList.add("spinOnce");
  }
  else
  {
    infinite.classList.remove("spin");
    once.classList.remove("spinOnce");
  }
}

/* THIS IS THE CSS CLASS THAT CREATES INFINITE ROTATION */

.spin {
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }



/* THIS IS THE CSS CLASS THAT ROTATES ONCE */

.spinOnce {
    -webkit-animation:spin 4s linear;
    -moz-animation:spin 4s linear;
    animation:spin 4s linear;
}
@-moz-keyframes spinOnce { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spinOnce { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spinOnce { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

<div style="width: 100px; height: 30px; background-color: green; color: white; margin: 20px; text-align: center; cursor: pointer;" onclick="startStop(1)">
GO
</div>

<div style="width: 100px; height: 30px; background-color: red; color: white; margin: 20px; text-align: center; cursor: pointer;" onclick="startStop(0)">
STOP
</div>

<!-- ELEMENT TO ROTATE INFINITLY WITH "spin" CLASS -->
<div id="imSpinning" class="spin" style="position: absolute; top: 10px; right: 30px; height: 140px; width: 140px; background-image: url(https://icons.iconarchive.com/icons/thehoth/seo/256/seo-web-code-icon.png); background-size: 100% 100%; background-position: center center; border-radius: 50%; overflow: hidden;"></div>


<!-- ELEMENT TO ROTATE ONCE WITH "spin" CLASS -->
<div id="imSpinningOnce" class="spinOnce" style="position: absolute; top: 10px; right: 200px; height: 140px; width: 140px; background-image: url(https://icons.iconarchive.com/icons/thehoth/seo/256/seo-web-code-icon.png); background-size: 100% 100%; background-position: center center; border-radius: 50%; overflow: hidden;"></div>

只需将上面的CSS类复制到页面的样式部分/工作表中，然后根据需要进行修改。确保您在html元素中引用了该类。

此外，我还在一个小的JavaScript类中进行了编辑，该类可以从DIV元素中添加/删除spin类，如果它有助于您启动和停止动画。

希望这会有所帮助，并且祝您好运！