javascript - 如何使 CSS 变换影响其他元素的流动

Question

我使用带有 transform 属性的 CSS transitions 来在添加和删除元素时缩小元素。

然而，这样做的一个问题是该属性不会影响其他元素的流动，因此看起来好像被删除的元素缩小了，然后其余元素突然跳了起来。

如果我要为 height 属性设置动画而不是使用变换，这会很好，但是在实际使用中我使用的是可变高度的元素，所以我不知道我可以在什么高度之间设置动画。

---

编辑:人们建议为 height 属性(如上所述不起作用)或 max-height 属性设置动画. max-height 属性将在一定程度上起作用，但是您无法完美地对齐时间，因为转换会不断调整 max-height 属性超过元素的实际高度直到过渡时间结束。

这些方法的另一个问题是它没有使用您可以通过 transform 属性实现的流畅动画。对象的转换会很顺利，但是随着浏览器以不同方式呈现这些转换，以下元素的移动会断断续续。

---

这是一个 JSFiddle，我的意思是(尝试添加然后删除元素，并在删除元素时查看跳转):

var button = document.querySelector("button");
var box = document.createElement("div");

box.className = "box";
box.appendChild(document.createTextNode("Click to delete"));

button.addEventListener("click", function(e) {
  var new_box = box.cloneNode(true);

  new_box.addEventListener("click", function(e) {
    this.className = "box deleting";
    window.setTimeout(function(e) {
      new_box.remove();
    }, 1000);
  });

  this.parentNode.appendChild(new_box);
});

button {
  font-size: 20pt;
}
.box {
  font-size: 20pt;
  margin: 10px;
  width: 200px;
  padding: 10px;
  background: pink;
  transform: scale(1, 1);
  transform-origin: top left;
}
.deleting {
  transform: scale(1, 0);
  transition: all 1000ms ease;
}

<button>
  Add Box
</button>

Answer 1

For elements whose layout is governed by the CSS box model, the transform property does not affect the flow of the content surrounding the transformed element.

编号:Transform Rendering

您必须使用 max-height 属性 ( check this answer ) 才能获得所需的效果。

var button = document.querySelector("button");
var box = document.createElement("div");

box.className = "box";
box.appendChild(document.createTextNode("Click to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to delete"));

button.addEventListener("click", function(e) {
  var new_box = box.cloneNode(true);
  new_box.style.height = ( Math.random() * (200 - 30) + 30 ) + 'px';

  new_box.addEventListener("click", function(e) {
    this.className = "box deleting";
    window.setTimeout(function(e) {
      new_box.remove();
    }, 1000);
  });

  this.parentNode.appendChild(new_box);
});

button {
  font-size: 20pt;
}
.box {
  overflow:hidden;
  font-size: 12pt;
  margin-bottom: 10px;
  width: 600px;
  max-height:1000px;
  padding: 10px;
  background: pink;
  transform: scaleY(1);
  transform-origin: top left;
}
.deleting {
  transform: scaleY(0);
  max-height:0;
  padding:0 10px;
  margin-bottom:0;
  transition: padding 1000ms ease,max-height 1000ms ease, transform 500ms ease 500ms, margin-bottom 1000ms ease;
}

<button>
  Add Box
</button>