如何在移除DOM中的上方元素时，用CSS实现下方元素的动画效果？

核心思路 #

直接移除元素会导致布局突变，无法触发过渡动画。正确做法是先让上方元素通过过渡效果逐渐收缩至消失，待过渡完成后再从DOM中移除，这样下方元素会随着上方元素的收缩自然平滑上移，完全适配任意高度的元素。

完整代码实现 #

HTML #

<div id="parent">
  <div id="red" class="box red"></div>
  <div class="box blue"></div>
</div>

CSS #

.box {
  width: 500px;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
}

.red {
  background: red;
  height: 500px; /* 示例高度，可任意修改 */
}

.blue {
  background: blue;
  height: 400px; /* 示例高度，可任意修改 */
}

/* 定义元素收缩消失的样式类 */
.hide {
  height: 0 !important;
  opacity: 0;
  margin: 0 !important;
  padding: 0 !important;
}

JavaScript #

const parent = document.getElementById('parent');
const redEle = document.getElementById('red');

setTimeout(() => {
  // 添加收缩类触发过渡动画
  redEle.classList.add('hide');
  // 监听过渡结束事件，动画完成后移除元素
  redEle.addEventListener('transitionend', function handleTransitionEnd() {
    parent.removeChild(redEle);
    // 移除监听避免重复触发
    redEle.removeEventListener('transitionend', handleTransitionEnd);
  });
}, 2000);

原理说明 #

• 给所有.box元素添加transition属性，让高度、透明度等属性变化都产生平滑过渡效果
• 通过添加hide类让红色元素的高度逐步变为0、透明度降低，此过程中布局流会实时调整，蓝色元素会自然跟随平滑上移
• 过渡动画完成后再移除红色元素，避免直接DOM操作导致的布局突变
• 该方案无需预先知晓元素高度，支持任意尺寸的元素适配

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