html - 填充空白时使用css滑动元素

Question

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

JSFiddle Example

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

我可以使用什么过渡，以便如果我单击红色 block ，一旦它被移除，蓝色和绿色 block 就会滑入到位？

Answer 1

Working Fiddle

试试这个；

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

或者可能是这个；

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

祝你好运!