如何进行CSS转换会影响其他元素的流动

Question

我正在使用带有transform属性的CSS过渡来在添加和删除元素时缩小元素.

然而,这个问题的一个问题是这个属性不会影响其他元素的流动,所以看起来被删除的元素会缩小,然后其余的元素突然跳跃.

如果我要为高度属性设置动画而不是使用变换,那就没问题,但是在实际使用中我使用的是可变高度的元素,所以我不知道我可以在它们之间设置动画的高度.

---

编辑:人们建议动画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

对于布局由 CSS 盒模型控制的元素，transform 属性不会影响变换元素周围的内容流。

参考：变换渲染

您必须使用该max-height属性（检查此答案）才能获得所需的效果。

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>