Как сделать анимацию на JS?

Question

[Иван Иванов]

Ну, я пытаюсь сделать анимацию прокрутки колеса, но почему-то у меня не работает....
Вот код:

var wheel = document.getElementsByClassName("wheel");
wheel.addEventListener('click', function(){
    wheel.style.transitionDuration = '3s';
    wheel.style.transitionTimingFunction = "ease-in-out";
    wheel.style.transform = "rotate(122222deg)";
})

Answer 1

[twobomb]

getElementsByClassName("wheel")
Возвращает коллекцию, поэтому либо берите первый элемент

var wheel = document.getElementsByClassName("wheel")[0];

Либо в цикле всем присваивайте обработчики

Comments

[Иван Иванов]

Поменял на getElementById, но всеравно ничего не работает

[twobomb]

Максим Фикс, Поместите весь код onload

window.onload = function(){
//сюда
}

[Иван Иванов]

twobomb, Сделал, работает, но теперь возник баг. Картинка вращается только после первого нажатия, последующие нажатия ничего не делают

[Егор Живагин]

Максим Фикс, логично, вы же ей один и тот же transform всё время ставите)

[Иван Иванов]

Егор Живагин, Егор Живагин, а как сделать так чтобы при повторном нажатии колесо еще крутилось?

[twobomb]

Максим Фикс, Дайте эту задачу программистам пожалуйста. Вот вам колхоз в последний раз

.rot{
  transition-duration:1s;
  transition-timing-function:ease-in-out; 
  transform:rotate(360deg);
}

window.onload = function(){
var wheel = document.getElementsByClassName("wheel")[0];
wheel.addEventListener('click', function(){
  if(wheel.classList.contains("rot")) 
wheel.classList.remove("rot");
  setTimeout(function(){wheel.classList.add("rot")},0)
})
}

[Иван Иванов]

twobomb, мда... мне не нужно, чтобы постоянно одинаково крутилось, мне нужно, чтобы крутилось каждый раз по другому(это я сделаю потом), поэтому твой вариант не подходит.