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