jQuery：如何动画移除多个div的style属性

嘿，我明白你的痛点——直接用removeAttr('style')确实会让元素瞬间跳回原位，完全没过渡效果。给你几个实用的方案，能让归位过程变得丝滑自然：

首先给你的div加个基础样式，提前把position: relative和过渡效果写好，这样后续left/top的变化都会触发动画：

.box {
  /* 保留你原有的flex布局样式 */
  position: relative;
  /* 可自定义过渡时间和曲线，这里用0.4秒+Material Design风格的曲线 */
  transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

然后用JS维护一个状态变量，判断当前是要随机位置还是归位：

let isRandomized = false;
const divs = document.querySelectorAll('.box');

function toggleDivPositions() {
  if (!isRandomized) {
    // 第一次点击：设置随机位置
    divs.forEach(div => {
      const randomLeft = Math.random() * 500 + 'px'; // 按需调整随机范围
      const randomTop = Math.random() * 300 + 'px';
      div.style.left = randomLeft;
      div.style.top = randomTop;
    });
    isRandomized = true;
  } else {
    // 第二次点击：过渡回初始位置
    divs.forEach(div => {
      div.style.left = '0';
      div.style.top = '0';
    });
    // 动画结束后再清理行内样式（可选，避免冗余）
    setTimeout(() => {
      divs.forEach(div => div.removeAttribute('style'));
    }, 400); // 时间要和过渡时间完全一致
    isRandomized = false;
  }
}

// 绑定点击事件到你的触发按钮
document.querySelector('.trigger-btn').addEventListener('click', toggleDivPositions);

这个方案的好处是零额外依赖，完全用原生CSS+JS实现，性能也拉满。

如果觉得行内样式乱糟糟的，可以用CSS变量来动态控制left/top，逻辑和样式分离更清晰：

.box {
  /* 保留原flex样式 */
  position: relative;
  left: var(--left-offset, 0);
  top: var(--top-offset, 0);
  transition: left 0.4s ease, top 0.4s ease;
}

JS部分改成操作CSS变量：

let isRandomized = false;
const divs = document.querySelectorAll('.box');

function toggleDivPositions() {
  if (!isRandomized) {
    divs.forEach(div => {
      const randomLeft = Math.random() * 500 + 'px';
      const randomTop = Math.random() * 300 + 'px';
      div.style.setProperty('--left-offset', randomLeft);
      div.style.setProperty('--top-offset', randomTop);
    });
    isRandomized = true;
  } else {
    divs.forEach(div => {
      div.style.setProperty('--left-offset', '0');
      div.style.setProperty('--top-offset', '0');
    });
    // 动画结束后移除CSS变量
    setTimeout(() => {
      divs.forEach(div => {
        div.style.removeProperty('--left-offset');
        div.style.removeProperty('--top-offset');
      });
    }, 400);
    isRandomized = false;
  }
}

这种写法更符合现代前端的最佳实践，后期维护起来也更方便。

如果你的flex布局用了justify-content或align-items，导致div初始位置不是left/top=0，那可以提前记录每个div的初始坐标，归位时精准过渡回去：

let isRandomized = false;
const divs = document.querySelectorAll('.box');
// 提前记录每个div相对于父元素的初始位置
const initialPositions = Array.from(divs).map(div => {
  const divRect = div.getBoundingClientRect();
  const parentRect = div.parentElement.getBoundingClientRect();
  return {
    left: `${divRect.left - parentRect.left}px`,
    top: `${divRect.top - parentRect.top}px`
  };
});

function toggleDivPositions() {
  if (!isRandomized) {
    divs.forEach(div => {
      const randomLeft = Math.random() * 500 + 'px';
      const randomTop = Math.random() * 300 + 'px';
      div.style.position = 'relative';
      div.style.left = randomLeft;
      div.style.top = randomTop;
    });
    isRandomized = true;
  } else {
    // 过渡回预先记录的初始位置
    divs.forEach((div, index) => {
      div.style.left = initialPositions[index].left;
      div.style.top = initialPositions[index].top;
    });
    // 动画结束后重置为flex布局
    setTimeout(() => {
      divs.forEach(div => div.removeAttribute('style'));
    }, 400);
    isRandomized = false;
  }
}

这个方案能完美适配各种flex布局的初始位置，不会出现归位偏差。

核心思路就是不要直接移除style属性，而是先通过过渡让元素平滑回到初始状态，等动画结束后再清理样式（可选）。这样既保留了动画效果，又能完美回归原来的flex布局。

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