移除上方的元素后，将CSS3动画化或过渡到适当位置

Slava 发表于 Dev

斯拉瓦

没有可见的闪烁和扭曲的最佳方法是什么？

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

一个儿子

我想到的最好的办法是将其隐藏，将其克隆到新位置（此处未显示），然后对其高度进行动画处理

当一个动画同时设置边距，填充和高度时，它变得不那么平滑，因此我为内容添加了一个额外的内部包装，因此动画仅对高度进行动画处理

$('.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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。