删除列表项时列表项的滑动过渡

Question

自从我上次使用CSS以来已经有一段时间了。我遇到了麻烦。我有一个项目清单。当我单击十字时，它会从 DOM 中删除该项目。但是，我正在寻找的是当一个项目被删除时，使其余项目向上滑动。

目前，它只是根据需要删除该项目，但会立即移动另一个项目以"填充空间"。我知道有一种方法可以使用 CSS 过渡来做到这一点，但问题是如何......

var remove = function(id) {
document.querySelector('#'+id).remove();
}

div {
border: 1px solid grey;
width: 100px;
margin: auto;
margin-bottom: 10px;
text-align: center;
padding: 10px
}
span {
float: right;
cursor: pointer;
}

<div id="one">One <span onclick="remove('one')">×</span></div>
<div id="two">Two <span onclick="remove('two')">×</span></div>
<div id="three">Three <span onclick="remove('three')">×</span></div>
<div id="four">Four <span onclick="remove('four')">×</span></div>

Answer 1

像这样？

我添加了一个名为closeSlide的类，它将对元素进行动画处理以向上滑动。转换后，通过设置计时器将其删除。

为了视觉上的美观，我为您的目标样式添加了overflow:hidden，或者，可以使用elem.style.overflow = 'hidden'通过 JS 添加。但为了合理起见，我将其添加到目标样式中，因为我想在启动结束动画时避免任何可能的抖动。

var remove = function(id) {
var elem = document.querySelector('#'+id);
elem.className += 'closeSlide';
setTimeout(function(){
elem.remove();
}, 200);
}

div {
border: 1px solid grey;
width: 100px;
margin: auto;
margin-bottom: 10px;
text-align: center;
padding: 10px;
overflow:hidden;
}
span {
float: right;
cursor: pointer;
}
.closeSlide {
margin-bottom:0;
height:0px;
padding-top:0;
padding-bottom:0;
transition: 0.2s all ease-out;
/*Just reverse any spacing styling you've applied to make it **magically** disappear*/
}

<div id="one">One <span onclick="remove('one')">×</span></div>
<div id="two">Two <span onclick="remove('two')">×</span></div>
<div id="three">Three <span onclick="remove('three')">×</span></div>
<div id="four">Four <span onclick="remove('four')">×</span></div>