javascript - 单击时使用 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 增加了旋转 Angular ，但这不会提高速度，您需要在每次点击时减少动画的持续时间以加速动画。

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>