删除上面的元素后,CSS3将元素动画或过渡到位置

Question

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

开始的小提琴: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>

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

目前为止的想法:

• transform:translateY表示已移除的元素下面的所有元素(可能是大型列表的性能密集型)
• 动画/变换下面第一个元素的边距,从被移除元素的高度变为0(利用链式动画？步骤开始？)
• 用透明占位符替换已删除的元素,并将其自身高度设置为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>