Question

自从我上次使用CSS以来已经有一段时间了。我遇到了这个问题。我有一个项目清单。当我点击十字架时，它会从DOM中删除该项目。然而，我所寻找的是使其余项目向上滑动，当一个项目被删除时。

目前它只是根据需要移除了该项目，但立即移动另一个项目以填充空间＆＃39;。我知道有一种方法可以用CSS过渡来做，但问题是如何......

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

列表项在删除时的滑动转换

1 个答案: