Что такое JavaScript-эквивалент следующего кода jQuery?

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

Вот простой пример, который показывает, как вы можете решить эту проблему с помощью vanilla JS и CSS, используя CSS-анимацию, которую можно включать и выключать с помощью JS.

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.