如何让 CSS 变换影响其他元素的流动

Question

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

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

如果我要为 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

您可以在收缩的盒子周围创建一个包装器。现在您只是缩放红色框，这意味着它仍然使用相同的空间，但它是以缩放的方式呈现的。当你最终删除它时，它不再使用那个空间，它下面的元素会向上跳跃。

如果您在每个红色框周围创建一个包装器，您可以控制它占用的空间。 只需更改包装器的高度，也可以使用过渡。

/* css for a wrapper */
overflow: hidden;
transition: height .2s; /* your time */

所以，不要只用过渡来缩放红色框，还要将它们放在一个环绕元素中，并更改该元素的高度。

Answer 2

为了获得最佳效果，您需要修改影响其周围环境的拳击属性。这包括宽度/高度、填充、边距和边框宽度。在下面的示例中，我将相关属性设置为 0 以获得您想要的效果。这包括影响元素垂直间距的所有属性：height、padding-[top/bottom]、margin-[top/bottom] 和 border-[top/bottom]-width 都转换为 0。

我还在框中添加了box-sizing: border-box; 和overflow: hidden; - 您应该会看到未设置它们时会发生什么。我会让你自己了解这些。

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) {
    new_box.style.height = this.offsetHeight + 'px';
    window.requestAnimationFrame(function () {
      new_box.style.height = 0;
      new_box.className = "box deleting";
      window.setTimeout(function(e) {
        new_box.remove();
      }, 1000);
    });
  });

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

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

<button>
  Add Box
</button>

Answer 3

对于布局受 CSS 框模型控制的元素， transform 属性不影响周围内容的流动 转换后的元素。

参考号：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>

Answer 4

没有办法做到正确（仅使用 css）¬¬

我这样做的方式是部分使用 JS（在我的例子中是 C#/Blazor）

我使用了max-height，但我使用var() 设置了它，我根据我拥有的内容计算了值本身（我为此使用了 JS/c#），然后使用该值使用 css 变量设置 内联 style：

<ul 
    class="submenu @SubMenuActiveClass" 
    style="--max-height:@((int)(40.3f * Model.Children.Count))px">

    <!--... childrens with 40.3px height each -->

</ul>

.submenu {
    max-height: 0;
    transition: max-height 0.3s ease-out;
    overflow: hidden;

    &.active {
        max-height: var(--max-height);
    }
}

该示例使用 Blazor 和 SCSS，但很容易理解