删除 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;
}

Answer 2

您应该隐藏整个 div 以使其完全不渲染。向 css 动画添加事件监听器并更改其样式（或根据需要设置另一个类名）

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

附：但这只是 webkit 浏览器。

• Webkit 浏览器（Chrome、Safari）使用 webkitTransitionEnd
• Firefox 使用 transitionend
• IE9+ 使用 msTransitionEnd
• Opera 使用 oTransitionEnd

Answer 3

试试这个：demo

我希望它能满足您的要求。

 $(".item").click(function(){

        $(this).animate({
            width: '0px',
            height:'100%',
            opacity:'0',
            margin:'0',
            padding:'0',
            left: '0px'

        });
    });

CSS

.item {
    float: left;
    width: 48%;
    min-height: 187px;
    border: 1px solid black;
    margin: 0 1% 1em 0;
    position: relative;
    background: white;


    transition:all 3s;
    transition-timing-function:ease-in-out;
    /* Safari */
    -webkit-transition:all 3s;
    -webkit-transition-timing-function:ease-in-out;
}