我想删除一个 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;
}
最佳答案
使用起来很开心
display:inline-block;
然后在 JavaScript 中为动画结束添加一个超时时间,然后是一个
this.style.display = none
链接在这里:
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;
}
关于javascript - 删除div动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22715374/