使用JavaScript切换CSS类时Transition属性不生效求助

问题根源：你为Header Two设置的transition属性仅存在于.header-two-hiding类中，当移除该类并添加.header-two-show时，元素失去了过渡规则，导致opacity变化瞬间完成，无法执行2秒的过渡动画。

下面提供两种修复方式：

方式一：使用通用类统一管理过渡属性 #

给两个标题添加通用基础类，将过渡属性放在这个类里，确保切换状态时过渡规则不会丢失。

修改后的HTML #

<!DOCTYPE html>
<html>
<head></head>
<body>
  <div class="header header-one-hiding">Header One</div>
  <div class="header header-two-hiding">Header Two</div>
</body>
</html>

修改后的CSS #

/* 通用基础类，统一设置opacity过渡 */
.header {
  transition: opacity 2s ease;
}

.header-one-hiding {
  opacity: 0;
  left: -1000px;
  position: relative;
  /* 为Header One额外添加left属性的过渡 */
  transition: opacity 2s ease, left 2s ease;
}

.header-one-show {
  opacity: 1;
  left: 0;
}

.header-two-hiding {
  opacity: 0;
}

.header-two-show {
  opacity: 1;
}

JS代码无需修改 #

document.addEventListener("DOMContentLoaded", function() {
  setTimeout(function() {
    var headingOne = document.querySelector(".header-one-hiding");
    var headingTwo = document.querySelector(".header-two-hiding");

    headingOne.classList.remove("header-one-hiding");
    headingOne.classList.add("header-one-show");

    headingTwo.classList.remove("header-two-hiding");
    headingTwo.classList.add("header-two-show");
  }, 1000);
});

方式二：在显示类中同步添加过渡属性 #

如果不想新增通用类，可以直接在.header-two-show类中也添加相同的过渡规则，确保元素切换状态后依然保留过渡效果：

.header-two-hiding {
  opacity: 0;
  transition: opacity 2s ease;
}

.header-two-show {
  opacity: 1;
  transition: opacity 2s ease;
}

补充说明 #

Header One能正常生效是因为：当切换类时，浏览器捕捉到了从opacity:0; left:-1000px到opacity:1; left:0的属性变化，且在类切换的瞬间，过渡规则还未被完全移除，因此动画能正常执行。而Header Two的问题核心是过渡规则仅存在于隐藏类中，移除后无过渡规则支撑动画。

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