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

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

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

1 个答案: