jquery - 单div可以实现列表项动画吗？

Question

我目前正在尝试实现列表项的动画外观，就像在 Pasquale D’Silva 的示例中看到的那样:https://medium.com/design-ux/926eb80d64e3#1f47

列表项消失，空白区域似乎在瞬间保持其高度，然后折叠到 0 高度。

我实现这一点的方法是让一个 div 具有透明背景，并在其中包含另一个包含实际内容的 div。

我将为内部 div 设置动画，暂停一下，然后将外部 div 的高度设置为 0。

这是我在 codepen 上的尝试:http://codepen.io/michaellee/pen/Cnpcf (单击一个元素使其消失。)

我想知道如果不在一个 div 中有一个 div 是否可以达到同样的效果？

HTML

<div class="stackOne">
    <div class="item-holder">
        <div class="item"></div>
    </div>
    <div class="item-holder">
        <div class="item"></div>
    </div>
    <div class="item-holder">
        <div class="item"></div>
    </div>
    <div class="item-holder">
        <div class="item"></div>
    </div>
    <div class="item-holder">
        <div class="item"></div>
    </div>
</div>

CSS

.stackOne{
  display: inline-block;
  vertical-align: top;
  width: 200px;
  overflow: hidden;
  .item-holder{
    height: 50px;
    margin: 0 0 1px 0;
    .item{
      width: 200px;
      height: 50px;
      background: #ccc;
      position: relative;
    }
  }
}

JS

$('.stackOne .item').click(function(){
  var item = $(this);
  item.animate({
    left: "100%"
  }, 250, "swing", function() {
    item.parent().delay(100).animate({
      height: 0
    }, 50, "linear", function(){
      item.parent().hide();
    });
  });
});

Answer 1

您可以删除容器并将您的动画直接应用到 child - 新 JS:

$('.stackOne .item').click(function(){
  var item = $(this);
  item.animate({
    left: "100%"
  }, 250, "swing", function() {
    item.delay(100).animate({
      height: 0
    }, 150, "linear", function(){
      item.hide();
    });
  });
});

New CodePen