Question

我有一个固定宽度且sudo ntfsfix /dev/sda9设置的容器。它包含多个项目（overflow: auto;），也包含固定尺寸。因此，如果容器有足够的子容器，则项目将环绕并创建类似网格的模式。

现在我从头开始动态删除子项，并想要为填充释放空间的项目的位置更改设置动画，并从行的开头向上移动到行尾上方。

display: inline-block;

var counter = 1;

document.getElementById("additem").onclick = function() {
	var item = document.createElement("div");
  item.innerText = counter;
  counter++;
	document.getElementById('container').appendChild(item);
}

document.getElementById("removeitem").onclick = function() {
	document.getElementById('container').removeChild(
    document.getElementById('container').children[0]
	);
}

#container {
  width: 280px;
  overflow: auto;
  border: 1px solid red;
  padding: 5px;
  text-align: center;
}

#container > div {
  width: 80px;
  height: 90px;
  border: 1px solid green;
  margin: 5px;
  display: inline-block;
}

编辑：我也可以使用jQuery来完成这个行为。

Answer 1

一个相当干净的解决方案是使用内联样式将已移除元素的opacity设置为0，并伴随transition和setTimeout定时即时运行当过渡结束时，有效地淡化元素，然后将其他所有内容滑动到位。这是我放在一起的快速片段：

var counter = 1;

document.getElementById("additem").onclick = function() {
  var item = document.createElement("div");
  item.innerText = counter;
  counter++;
  document.getElementById('container').appendChild(item);
}

document.getElementById("removeitem").onclick = function() {
  document.getElementById('container').children[0].setAttribute('style', 'opacity: 0');
  window.setTimeout(function() {
    document.getElementById('container').removeChild(
      document.getElementById('container').children[0]
    )
  }, 300);

}

#container {
  width: 280px;
  overflow: auto;
  border: 1px solid red;
  padding: 5px;
  text-align: center;
}

#container>div {
  width: 80px;
  height: 90px;
  border: 1px solid green;
  margin: 5px;
  display: inline-block;
  transition: opacity 0.3s;
}

<button id="additem">add item</button>
<button id="removeitem">remove item</button>

<div id="container">
</div>

在内容更改时为内联块元素设置换行动画

1 个答案: