Question

我有几个内容块。我将一个滑到一边，然后将其取下。一旦完成，我希望它下面的块向上滑动并取而代之。

HTML

<div id="container">
    <div id="elem1" class="item one">
        Element 1
    </div>
    <div id="elem2" class="item two">
        Element 2
    </div>
    <div id="elem3" class="item three">
        Element 3
    </div>
</div>

CSS

.one {
    background-color: red;    
}

.two {
    background-color: blue;
}

.three {
    background-color: green;
}

.item {
    height: 150px;
    width: 200px;
    margin-bottom: 20px;
}

.closed {
    -webkit-transition: all .75s ease;
    -moz-transition: all .75s ease;
    -o-transition: all .75s ease;
    transition: all .75s ease;
    background-color: yellow;
    margin-left: 200px;
    opacity: 0;
}

使用Javascript / JQuery的

$('.item').on('click', function(){
    $(this)
    .addClass('closed')
    .on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function(){
        $(this).remove();
    });
});

我可以使用哪种转换，以便在单击红色块时，一旦将其移除，蓝色和绿色块将滑入到位？

Answer 1

<强> Working Fiddle

试试这个;

$(this).height(0).css({'margin':'0'});

或者可能是这个;

$(this).css({'margin':'0','height':'0'});

祝你好运！

Answer 2

您可以随时间使用.animate()并调整top或margin-top以将元素移出视图。一旦退出，您可以删除元素并将top / margin-top重置为其原始值。

Answer 3

您可以使用高度和边距等于0

进行动画处理

$('.item').on('click', function(){
  var obj = $(this);
  $(this)
   .addClass('closed')
   .on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function(){
      obj.animate({ height: 0, margin : 0 }, 0);
   });
});

这是小提琴链接 DEMO

填充空白区域时使用css滑动元素

3 个答案: