Анимировать элемент, используя Javascript Vanilla

Question

Как можно анимировать элемент с помощью Javascript vanilla? Похоже на jquery. Пример:

$( "button.continue" ).animate({left: "100px", top: "200px"}, 5000);

Где мы передаем атрибут, желаемое значение и время.

В моем случае мне нужна левая и верхняя позиции для анимации и скольжения.

Решение

Я сделал как @IceMetalPunk sugested и добавил анимацию с помощью css, только когда мне нужно анимировать.

document.getElementById("animate").addEventListener("click", function(){
  let e = document.getElementById('elementToAnimate');

  e.classList.add("animate");
  setTimeout(()=> e.classList.remove("animate"), 500);

  e.style.top = Math.floor(Math.random() * window.innerHeight) + 'px';
  e.style.left = Math.floor(Math.random() * window.innerWidth) + 'px';
});

document.getElementById("dontAnimate").addEventListener("click", function(){
  let e = document.getElementById('elementToAnimate');

  e.style.top = Math.floor(Math.random() * window.innerHeight) + 'px';
  e.style.left = Math.floor(Math.random() * window.innerWidth) + 'px';
});

#elementToAnimate {
  width: 20px;
  height: 20px;
  background: red;
  position: absolute;
  top: 0;
  left: 0;
}

#elementToAnimate.animate {
  transition: left 500ms ease-in-out, top 500ms ease-in-out;
}

<div id="elementToAnimate"></div>

<button id="animate">Animate</button>
<button id="dontAnimate">Dont Animate</button>

Answer 1

Попробуйте использовать CSS-переходы. В CSS сделайте что-то вроде этого:

button.continue {
  transition: 5s;
}

Затем в JS вы можете просто установить левый / верхний значения:

document.querySelectorAll('button.continue').forEach(button => {
  button.style.left = '100px';
  button.style.top = '200px';
});

Answer 2

Взгляните на API веб-анимации . Это экспериментальная функция, поэтому Поддержка браузера (в основном Safari) может стать проблемой для вас. В противном случае вы можете сделать это так, как уже указали другие.