javascript - 删除div动画

Question

我想删除一个 div 并让所有其他 div(之后)在包装器回流中并很好地动画(滑动)到它们的新位置。此刻它一闪而过，事情并不总是在正确的地方进行，而且我普遍失败。

JsFiddle:http://jsfiddle.net/CUzNx/30/

HTML

<div class="container">
    <div id="item1" class="item">Test1</div>
    <div id="item2" class="item">Test2</div>
    <div id="item3" class="item">Test3</div>
    <div id="item4" class="item">Test4</div>
    <div id="item5" class="item">Test5</div>
    <div id="item6" class="item">Test6</div>
</div>

Javascript

var items = document.getElementsByClassName('item');
for(var i = 0; i < items.length; i ++)
{
    items[i].onclick = function() {
        this.classList.toggle('hide');
    }
};

CSS

.container {
    width: 500px;
}
.item {
    float: left;
    width: 48%;
    min-height: 187px;
    border: 1px solid black;
    margin: 0 1% 1em 0;
    position: relative;
    background: white;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
}
.hide {
    width: 0px;
    height: 100%;
    opacity:0;
    margin:0;
    padding:0;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
}

Answer 1

使用起来很开心

display:inline-block;

然后在 JavaScript 中为动画结束添加一个超时时间，然后是一个

this.style.display = none

链接在这里:

http://jsfiddle.net/8BSkY/

var items = document.getElementsByClassName('item');
for(var i = 0; i < items.length; i ++)
{
    items[i].onclick = function() {
        var box = this
        this.classList.toggle('hide');
        setTimeout(function(){
            box.style.display = 'none';
        },500);
    }
};

然后:

.item {
    display: inline-block;
    width: 48%;
    min-height: 187px;
    border: 1px solid black;
    position: relative;
    background: white;
    box-sizing:border-box;
    margin:1%;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
}