开启transition后元素left属性无法随按钮点击变更的技术求助

这个问题的核心原因是浏览器的样式批处理与重排优化机制：

• 页面首次加载时调用applyTransition(false)，此时元素还未完成首次渲染，浏览器会直接合并初始CSS的left:0与JS设置的left:30%，最终应用30%，过渡能触发是因为存在从默认0到30%的明确状态差。
• 点击按钮调用时，浏览器已完成元素渲染，此时直接设置新left值，浏览器的优化机制会延迟样式计算，导致无法识别当前元素的实际状态，进而无法触发过渡，甚至看起来left属性未变更。

解决方案 #

方案1：强制触发重排 #

在设置新的left值前，读取一个会触发浏览器重排的属性（如offsetLeft），强制浏览器先确认当前元素的样式状态：

applyTransition(arrowClicked = false) {
  const element = document.querySelector(".elementToTransit");
  // 强制触发重排，让浏览器更新元素计算样式
  void element.offsetLeft;
  if(arrowClicked === false){
    element.style.left = '30%'
  } else {
    element.style.left = '50%'
  }
}

方案2：使用requestAnimationFrame #

让样式变更在下一帧渲染周期执行，确保浏览器已处理完之前的样式状态：

applyTransition(arrowClicked = false) {
  const element = document.querySelector(".elementToTransit");
  requestAnimationFrame(() => {
    if(arrowClicked === false){
      element.style.left = '30%'
    } else {
      element.style.left = '50%'
    }
  });
}

方案3：用CSS类控制状态（推荐） #

将样式逻辑留在CSS中，通过切换类来控制元素状态，从根源避免JS操作样式的渲染问题，同时提升代码可维护性：

修改CSS：

.elementToTransit {
  height: inherit;
  position: absolute;
  top: 0;
  left: 0;
  transition: left 2s linear;
}
.elementToTransit.state-30 {
  left: 30%;
}
.elementToTransit.state-50 {
  left: 50%;
}

修改JS：

applyTransition(arrowClicked = false) {
  const element = document.querySelector(".elementToTransit");
  element.classList.remove('state-30', 'state-50');
  element.classList.add(arrowClicked ? 'state-50' : 'state-30');
}

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