当顶部元素从 DOM 中删除时，如何使用 css 使底部元素具有动画效果？

Question

让我们有 2 个 div，一个是红色，另一个是蓝色。红色 div 位于顶部，蓝色位于底部。现在，在删除顶部元素时，底部元素会向上移动。我基本上希望当蓝色/底部 div 向上移动时应该有动画/过渡，使其缓慢移动以覆盖间隙。

编辑：此外，div 的高度并不总是相同。

JS小提琴链接：https://jsfiddle.net/gr13xoec/

HTML

var parent = document.getElementById('parent');
var ele = document.getElementById('red');


setTimeout(()=> {
 parent.removeChild(ele);
}, 2000) 

.box{
  height: 500px;
  width: 500px;
  transition: all 5s ease-in-out;  
}

.red{
  background: red;
}

.blue{
  background: blue;
  animation: move 5s ease-out;
}

@keyframes move {
    0% {top: 100%}
   100% {top: 0%}
}

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

Answer 1

这就是你的目标吗？

var ele = document.getElementById("parent");


setTimeout(() => {
  ele.classList.add("mystyle");

}, 2000)

.box {
  height: 500px;
  width: 500px;
  transition: all 5s ease-in-out;
}

.red {
  background: red;
}

.blue {
  background: blue;
  top: 500px;
  position: relative;
}

.mystyle .blue {
  transition: top 2s;
  top: 0px;
}

.mystyle #red {
  display: none;
}

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

  <div class="box blue">
  </div>
</div>