如何在删除上部 div 时进行过渡

Question

我想知道如何在删除上部 DIV 时向上过渡一个div...我知道有很多关于它的问题，但他们都使用Jquery，我不想使用它。我该怎么做？

例如：

<div class='father'>
   <div class='child'>
   <div class='child'>
   <div class='child'>
   <div class='child'>
<div>

当上部子级从 DOM 中删除时，其他div 会向上过渡......可能吗？

Answer 1

它应该像向.child类添加transition一样简单。这取决于您如何删除上部div。下面是一个示例

.child {
  height: 200px;
  background: #666;
  border: 1px solid;
  transition: 1s;
}
#top:hover {
  height: 0;
}
#next {
  transition: 1s;
}

<div>
  <div class="child" id="top">hover over this div to hide it</div>
  <div class="child" id="next">this div will move up</div>
</div>