如何为display:none隐藏元素后相邻元素位移添加CSS过渡

display是不可插值的离散属性，元素切换到display: none的瞬间会直接从正常文档流中移除，后续元素的位置跳变是瞬时完成的，没有过渡计算的中间帧，直接给这个位移动作加CSS transition是无法实现的。

要实现平滑位移效果，不需要给第二个元素单独加位移动画，只要让第一个元素的显隐过程是连续可动画的，第二个元素在文档流推动下自然会产生平滑的移动效果，以下是两种可直接落地的方案：

方案1：替换display: none为可过渡属性组合（优先推荐） #

放弃用display控制显隐，改用支持过渡的属性实现「视觉隐藏+不占文档流空间」的效果，不需要复杂JS逻辑，性能最好。

固定高度场景（适配提供的示例） #

如果第一个元素高度固定，直接通过高度、透明度、内外边距的过渡实现折叠效果即可，修改后的完整代码如下：

.first {
  background: red;
  height: 250px;
  /* 给需要变化的属性加过渡，时长可自行调整 */
  transition: all 0.3s ease;
  overflow: hidden; /* 折叠时隐藏内部溢出内容 */
}
/* 隐藏状态类，不再使用display: none */
.first.hidden {
  height: 0;
  opacity: 0;
  /* 如果元素有margin、padding、border，记得同步过渡到0，避免折叠后留空隙 */
  margin: 0;
  padding: 0;
  border-width: 0;
}

.second {
  background: green;
  height: 250px;
}

const firstEle = document.querySelector(".first");
firstEle.onclick = function() {
  this.classList.add("hidden");
}
document.querySelector(".second").onclick = function() {
  firstEle.classList.remove("hidden");
}

<div>
  <div class="first">My element</div>
  <div class="second">Another element</div>
</div>

自适应高度场景 #

如果第一个元素内容高度不固定，无法提前写死高度值，可以用Grid行高过渡方案，不需要手动计算元素高度：

.first {
  background: red;
  display: grid;
  grid-template-rows: 1fr;
  transition: all 0.3s ease;
}
.first .content {
  overflow: hidden;
}
.first.hidden {
  grid-template-rows: 0fr;
  opacity: 0;
}

.second {
  background: green;
  height: 250px;
}

对应的HTML需要给第一个元素的内容加一层包裹标签：

<div>
  <div class="first">
    <div class="content">My element</div>
  </div>
  <div class="second">Another element</div>
</div>

JS逻辑和固定高度场景完全一致，切换hidden类即可。

方案2：必须保留display: none逻辑时的FLIP实现 #

如果业务场景要求元素隐藏后必须设置display: none（比如需要彻底屏蔽元素交互、适配读屏器逻辑），可以通过FLIP技术手动补全过渡动画，核心逻辑如下：

• 触发隐藏动作时，先不修改display属性，记录第二个元素当前的起始位置
• 立刻给第一个元素设置display: none，触发重排后记录第二个元素跳转后的终点位置
• 通过transform把第二个元素反向偏移回起始位置，给用户造成元素还没移动的视觉错觉
• 下一帧给transform加过渡属性，再把transform重置为none，第二个元素就会平滑移动到终点位置，动画结束后清除临时样式即可。

这个方案需要编写额外的JS动画逻辑，复杂度更高，非必要场景优先选择方案1即可。

注意：不要尝试用setTimeout延迟设置display: none来实现过渡，只要显隐前后没有可插值的连续属性变化，元素位置依然会跳变，无法触发过渡效果。

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