如何将jQuery的.animate()与.css()代码转换为原生JavaScript？

原jQuery代码实现了两个核心功能：先给所有.box元素设置初始left定位值，再以300毫秒的时长将left属性动画过渡到目标值。以下是对应的原生JavaScript实现：

方法一：使用原生Web Animations API（推荐） #

这个方法最接近jQuery的animate()逻辑，语法简洁且原生支持动画控制：

const boxWidth = 200;
// 获取页面中所有.box元素
const boxes = document.querySelectorAll('.box');

boxes.forEach(box => {
  // 设置初始left位置
  box.style.left = `${boxWidth * 2}px`;
  
  // 执行left属性的过渡动画
  box.animate(
    [{ left: `${boxWidth}px` }],
    {
      duration: 300, // 动画时长（毫秒）
      fill: 'forwards' // 动画结束后保持最终状态
    }
  );
});

方法二：使用CSS Transition #

如果需要兼容更旧的浏览器，也可以通过CSS过渡属性实现：

const boxWidth = 200;
const boxes = document.querySelectorAll('.box');

boxes.forEach(box => {
  // 提前设置过渡规则
  box.style.transition = 'left 300ms ease';
  // 设置初始定位
  box.style.left = `${boxWidth * 2}px`;
  
  // 触发浏览器重绘，避免样式修改被合并导致动画不触发
  void box.offsetWidth;
  
  // 修改left值，触发过渡动画
  box.style.left = `${boxWidth}px`;
});

注意事项 #

• .box元素必须设置position: relative/absolute/fixed定位，否则left属性不会生效，这一点和jQuery的要求一致。

内容的提问来源于stack exchange，提问作者user19540948