在纯 JavaScript 中翻译 .animate()答案

【问题标题】：translate .animate() in plain JavaScript在纯 JavaScript 中翻译 .animate()
【发布时间】：2023-02-23 15:20:23
【问题描述】：

我如何将此代码 sn-p 翻译成纯 Javascript？

const boxWidth = 200

$('.box').css({ left: ( boxWidth * 2) + "px" });

$('.box').animate({
  left: boxWidth + "px"
}, 300);

此处附有示例：

https://codepen.io/weristsam/pen/RwYaYKG

【问题讨论】：

没有直接等效于 jQuery 动画功能的 JS，但是 CSS transitions 可以在更改这样的基本样式时处理动画。

标签： javascript

【解决方案1】：

这可能等同于您想要实现的目标：

const boxWidth = 200

const boxEl = document.getElementsByClassName('box')[0]
boxEl.style.left = `${boxWidth * 2}px`;
boxEl.animate([{
    transform: `translateX(${-boxWidth}px)`
}], 300);

您按类名获取项目，然后选择第一项。您应用属性 (left: boxWidth * 2) 和 animate()。对于动画，您使用 CSS transform，它将您的方框转换为 boxWidth 到左侧的距离300毫秒.

【讨论】：

为什么当 OP 想要动画 left 时切换到 transform？此外，您将想要 fill: "forwards" 那个动画，并真正做到最接近 jQuery 的，甚至 easing: "ease-in-out"。 jsfiddle.net/wuafLjm2

【解决方案2】：

找到了重建 animate() of jquery 的解决方案

function animationLeft(element, start, end) {
  function frame() {
    start++ // update parameters
    element.style.left = left + "px" // show frame
    if (start == end)
      // check finish condition
      clearInterval(id)
  }
  var id = setInterval(frame, 0) // draw every 10ms
}

不幸的是，动画时间太慢所以我不得不使用 jQuery。

感谢所有帮助者！

【讨论】：