移除上面的元素后，CSS3 将元素设置为动画或过渡

Question

在没有任何明显闪烁和任何怪异的情况下实现这一目标的最佳方法是什么？

开始的 fiddle :http://jsfiddle.net/35qec14b/2/

$('.element').on('click', function(e){
  this.remove();
});

.element {
  position:relative;
  width: 200px;
  margin:5px;
  padding:20px;
  cursor:pointer;
  background: rgb(150,200,250);
  transition:1s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
(click to remove)
<div class="element">Element 1</div>
<div class="element">Element 2<br>Second line</div>
<div class="element">Element 3</div>
<div class="element">Element 4<br>Second line</div>
<div class="element">Element 5</div>

注意:在这种情况下，被移除的元素必须立即消失，因为它会出现在另一个位置，我们不希望它同时在两个地方可见。

到目前为止的想法:

转换:translateY 对于已删除元素下方的所有元素(对于大型列表可能是性能密集型)

动画/变换 margin 下面的第一个元素，从移除元素的高度到 0(利用链式动画？step-start？)

用透明占位符替换已移除的元素并为其自己设置动画高度 到 0

Answer 1

想到的最好方法是隐藏它，将其克隆到新位置(此处未显示)，然后为其高度设置动画

当同时为边距、填充和高度设置动画时，它变得不那么平滑，所以我为内容添加了一个额外的内部包装器，因此动画只为高度设置动画

$('.element').on('click', function(e) {
  this.style.height = $(this).height()+ 'px';
  this.classList.add('hide-me');
  (function(el) {
    setTimeout(function() {
      el.remove();
    }, 500);
  })(this);
});

.element {
  position: relative;
  width: 200px;
  overflow: hidden;
}
.element > div {
  margin: 5px;
  padding: 20px;
  background: rgb(150, 200, 250);
}

.element.hide-me {
  animation: hideme .5s forwards;
  opacity: 0;
}
@keyframes hideme {
  100% {
    height: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
(click to remove)
<div class="element">
  <div>
    Element 1
  </div>
</div>
<div class="element">
  <div>
    Element 2
    <br>Second line
  </div>
</div>
<div class="element">
  <div>
    Element 3
  </div>
</div>
<div class="element">
  <div>
    Element 4
    <br>Second line
  </div>
</div>
<div class="element">
  <div>
    Element 5
  </div>
</div>