如何反转CSS过渡效果？实现反向过渡逻辑的技术问询

没问题，要实现这个和原有逻辑完全反转的过渡效果，核心就是让Div One的展开动画先完整执行，再触发Div Two的收起动作。我给你准备了完整的可运行代码，以及关键细节的说明：

完整代码示例 #

HTML结构 #

<div id="one" style="height: 0px; overflow: hidden; background: #eee; padding: 1rem;">Div One Content</div>
<div id="two" style="height: 200px; overflow: hidden; background: #ddd; padding: 1rem;">Div Two Content</div>
<button onclick="actionOne()">Button One</button>
<button onclick="actionTwo()">Button Two</button>

CSS过渡设置 #

#one, #two {
  /* 统一过渡属性，这里的0.5s是过渡时长，后续JS要和这个值对应 */
  transition: height 0.5s ease;
}

JavaScript逻辑 #

const one = document.getElementById("one");
const two = document.getElementById("two");
// 和CSS过渡时长保持一致，单位为毫秒
const TRANSITION_DURATION = 500;

function actionOne() {
  // 原有逻辑：先收起Div One，等过渡完成后展开Div Two
  one.style.height = "0px";
  setTimeout(() => {
    two.style.height = "200px";
  }, TRANSITION_DURATION);
}

function actionTwo() {
  // 反转逻辑：先展开Div One，等过渡完成后再收起Div Two
  one.style.height = "200px";

  // 方式1：用setTimeout简单实现（需和CSS时长严格对应）
  setTimeout(() => {
    two.style.height = "0px";
  }, TRANSITION_DURATION);

  // 方式2：监听transitionend事件（更精准，适配动态修改过渡时长的场景）
  // one.addEventListener('transitionend', function handleTransitionEnd() {
  //   two.style.height = "0px";
  //   // 移除事件监听，避免重复触发
  //   one.removeEventListener('transitionend', handleTransitionEnd);
  // }, { once: true }); // 也可以用{once: true}让事件自动只执行一次
}

关键细节说明 #

• 过渡时长一致性：CSS里的过渡时长要和JS中setTimeout的延迟时间保持一致，或者用transitionend事件完全依赖浏览器的过渡完成信号，后者更健壮。
• overflow: hidden：必须给两个div设置这个属性，否则height变为0时内容还是会显示出来，过渡效果无效。
• 事件监听的清理：如果使用transitionend事件，一定要记得移除监听（或者用{once: true}选项），否则多次点击按钮会触发多次回调，导致逻辑混乱。

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