1

我目前正在尝试实现列表项的动画外观，如 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 的情况下实现相同的效果？

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();
    });
  });
});
4

1 回答 1

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

新的 CodePen

于 2013-08-12T21:03:28.723 回答