Question

我想删除一个div，并在包装器重排中包含所有其他div（之后），并将其动画（滑动）很好地放入他们的新位置。在它四处翻动的时候，事情并不总是出现在正确的地方，而且我一般都会失败。

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

试试这个：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;
}

Answer 3

你应该隐藏整个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');
    }
};

P.S。但是，这只是webkit浏览器。

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

删除div动画

3 个答案:

链接到这里：