以下 jQuery 代码的 JavaScript 等价物是什么？

Question

I want to make spinning wheel but instead of rotating wheel i want to rotate the pointer. I have the following jQuery code snippet which rotates a pointer but I don't know how to convert this jQuery snippet into JavaScript.

jQuery code:

$( 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');
});

i want to do something like this https://i.stack.imgur.com/0KArr.gif

Answer 1

Here is a simple example, that shows how you could solve it with vanilla JS and CSS by using CSS animations which can be toggled on and off via 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>

Depending on which browsers you want/have to support, you might have to add vendor prefixes in the CSS code.