遍历类名元素时如何同步设置CSS left属性实现批量位移动画

问题根因 #

你的代码中外层for循环的每次迭代都会被内层的await阻塞，必须等当前元素的完整动画执行完毕才会处理下一个元素，因此出现了依次动画的效果。

解决方案 #

把单个元素的动画逻辑封装为独立的异步函数，遍历元素时同步启动所有动画任务即可：

// 转换类数组为普通数组便于遍历
const moveElements = Array.from(document.getElementsByClassName("move"));

// 单个元素的动画逻辑
const runSingleAnimation = async (el) => {
  const initLeft = el.getBoundingClientRect().left;
  for (let currentLeft = initLeft; currentLeft > -20; currentLeft--) {
    el.style.left = `${currentLeft}%`;
    await new Promise(resolve => setTimeout(resolve, 20));
  }
};

// 同时启动所有元素的动画
const animationTasks = moveElements.map(el => runSingleAnimation(el));
// 若需要所有动画结束后执行后续操作，可取消注释下面的代码
// await Promise.all(animationTasks);

优化建议 #

• 代码中无需通过id重新查询元素，直接复用遍历得到的DOM引用即可，既减少冗余DOM查询，也避免了元素无id时报错的问题
• 如果对动画流畅度要求更高，推荐使用requestAnimationFrame替代setTimeout做帧调度，动画会更顺滑无卡顿
• 该场景更推荐使用CSS transition实现，性能更优且代码更简洁：

  .move {
    /* 动画时长、缓动效果可根据需求调整 */
    transition: left 1.5s linear;
  }
  

  JS只需批量修改属性即可触发同步动画：

  document.querySelectorAll('.move').forEach(el => el.style.left = '-20%');
  

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