可以用单个div实现列表项动画吗？答案

【问题标题】：Can a list item animation be achieved with a single div?可以用单个div实现列表项动画吗？
【发布时间】：2013-08-12 20:15:04
【问题描述】：

我目前正在尝试实现列表项的动画外观，如 Pasquale D'Silva 的示例中所示：https://medium.com/design-ux/926eb80d64e3#1f47

列表项消失了，空白空间似乎在折叠到 0 高度之前保留了它的高度。

我实现这一点的方法是拥有一个具有透明背景的 div，并在该 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;
    }
  }
}

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

【问题讨论】：

为什么这个问题被否决了？是不是更适合ux.stackexchange.com？
@zfus 我也在想同样的事情。
@zfus 我猜它是基于意见的？不过只是一个猜测，对我来说这似乎完全可以接受......也许可以尝试在帖子中包含代码并重新措辞，这样它就不会询问是否有“更好的方法”。
你还没有描述你已经拥有的东西有什么问题。现在看起来您有一个正在尝试进行微优化的有效解决方案（这不是 SO 的用途）。
@DrydenLong 谢谢会尝试改写。

标签： jquery html css jquery-animate

【解决方案1】：

您可以移除容器并将动画直接应用到孩子 - 新 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

【讨论】：