以下 jQuery 代碼的 JavaScript 等價物是什么？

Question

我想制作紡車，但我想旋轉指針而不是旋轉輪。 我有以下旋轉指針的 jQuery 代碼片段，但我不知道如何將此 jQuery 片段轉換為 JavaScript。

jQuery代碼：

$( document ).ready(function() {
  var startJP = (164) + (360 * 3);
  $('.jackpot-pointer').animate({  transform: startJP }, {
      step: function(now,fx) {
        $(this).css('-webkit-transform','rotate('+now+'deg)'); 
      },
      duration:6000
  },'linear');
});

我想做這樣的事情https://i.stack.imgur.com/0KArr.gif

Answer 1

這是一個簡單的例子，它展示了如何通過使用可以通過 JS 打開和關閉的 CSS 動畫，使用 vanilla JS 和 CSS 來解決它。

 var stage = document.querySelector('#stage'); var rot = document.querySelector('#rotating'); stage.addEventListener('click', function () { rot.classList.toggle('animated'); });

 #stage { position: relative; height: 100px; background-color: #000; } #rotating { position: absolute; top: calc(50% - 25px); left: calc(50% - 25px); width: 50px; height: 50px; background-color: #c00; animation: rotate linear 6s; animation-iteration-count: infinite; animation-play-state: paused; transform-origin: 50% 50%; } #rotating.animated { animation-play-state: running; } @keyframes rotate { 0% { transform: rotate(0deg) ; } 100% { transform: rotate(359deg) ; } }

 <div id="stage"> <div id="rotating"></div> </div>

根據您想要/必須支持的瀏覽器，您可能需要在 CSS 代碼中添加供應商前綴。