javascript - 如何使用 Javascript 设置动画的持续时间？

Question

我想要一个 JavaScript 函数来执行我提供的时间。我知道 setTimeOut() 或 setInterval() 的作用，我不是在寻找它们。

例如，我在top: 0 和left: 0 处有一个div。我希望我的 JS 函数在给定时间内从 left: 0 获取 div 到 left: 50。

请提供原始 JavaScript 解决方案，而不是 jQuery。

Answer 1

Web 动画定义实验 Element.animate

document.getElementById("test").animate([
  { left: '0px' }, 
  { left: '50px' }
], {
  duration: 1000,
  fill: 'forwards'
});

#test {
  background-color: green;
  width: 100px;
  height: 100px;
  position: relative;
}

<div id="test"></div>