能否根据元素淡出后的opacity值分配类？现有代码问题排查

你的代码主要存在三个问题：

• 语法错误：if (aa.style.opacity === "0";)这行里的分号是多余的，属于语法错误，会直接导致这段判断逻辑无法执行。
• opacity值获取方式错误：aa.style.opacity只能读取元素的行内style属性里的opacity值，但你的opacity是定义在CSS类.class1中的，所以用这个方法拿不到正确的0值，判断条件永远不成立。
• 定时器不够精准：用固定2秒的setTimeout来等待动画结束，完全依赖你设置的transition时长，一旦CSS里的动画时间修改，这个定时器就得同步调整，不够灵活也不够可靠。

修正方案 #

1. 移除if条件里多余的分号；
2. 用window.getComputedStyle(aa).opacity获取元素实际生效的opacity值；
3. 更推荐的方式是监听transitionend事件，动画结束后自动触发后续逻辑，替代定时器。

完整修正代码 #

JavaScript

function start() {
  let abc = document.getElementById("myDIV");
  abc.className = "class1";
  
  // 监听过渡结束事件
  abc.addEventListener('transitionend', function handleTransitionEnd() {
    // 只处理opacity的过渡结束事件（避免其他属性过渡干扰）
    if (event.propertyName === 'opacity') {
      abc.className = "";
      // 移除事件监听，避免重复触发
      abc.removeEventListener('transitionend', handleTransitionEnd);
    }
  });
}

CSS

.class1 {
  background-color: coral;
  padding: 16px;
  opacity: 0;
  transition: opacity 1s linear;
}

HTML

<div id="myDIV">
  <p>I am myDIV.</p>
</div>
<p>Click the button to set a class for myDIV:</p>
<button onclick="start()">Try it</button>

如果一定要用定时器的方式（不推荐），修正后的代码如下：

function start() {
  let abc = document.getElementById("myDIV");
  abc.className = "class1";
  const aa = document.querySelector(".class1");
  
  setTimeout(function() {
    // 获取计算后的样式值
    const computedOpacity = window.getComputedStyle(aa).opacity;
    // 注意：getComputedStyle返回的是字符串，0会变成"0"
    if (computedOpacity === "0") {
      abc.className = "";
    }
  }, 1000); // 动画时长是1秒，这里设置1秒即可
}

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