css 变换下方的 div 可以与上方的 div 一起移动吗？答案

【问题标题】：Can divs below a css transform move along with divs above?css 变换下方的 div 可以与上方的 div 一起移动吗？
【发布时间】：2018-12-24 12:13:36
【问题描述】：

我正在使用 css 过渡来将一堆 div 叠放在一起。在任何时候，其中一个 div 都可能崩溃。它下面的所有 div 都应该向上移动以填充它的位置。

Here is a codepen that describes the situation.

我使用的css如下：

div {
  height: 100px;
  width: 100px;
  margin: 15px;
}

.top {
  background-color: red; 
  transform-origin: top;
  animation: move 2s infinite;
}

.bottom {
  background-color: blue; 
}

@keyframes move {
  0% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(90deg);
  }
}

这样，顶部 div 将扩展和收缩。我希望它下面的 div 在顶部折叠时向上移动。

如果我将transform 切换为height，如下所示：

@keyframes move {
  0% {
    height 0;
  }
  50% {
    height: 100px;
  }
}

底部的 div 确实会移动，但这对我来说不是一个好的解决方案，因为在实际应用中，每个 div 都有一个动态计算的大小。

底部的div如何随着顶部的div平滑移动？

【问题讨论】：

介意我这样做的主要目的吗？我只是想要它的可视化。
我们有一堆显示数据的面板。每个面板都可以通过单击一个按钮来折叠以仅显示一个标题。 codepen 只是我可以创建的最简单的版本。在实际实现中，没有无限动画循环。
那你有什么建议吗？我可能会使用其他东西。
@AndrewEisenberg 你期待这个吗？？？检查并告诉我codepen.io/anon/pen/rreKJr
不，这行不通。只有顶框应该转换。

标签： css css-transitions css-animations css-transforms

【解决方案1】：

使用transform 你将无法做到这一点，因为当一个元素被转换时，周围的元素不会在 DOM 中看到任何变化，因为 DOM 方面没有任何变化发生了。

你可以做些什么来优化它，是准备height将改变的浏览器，属性will-change: height

MDN：https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

这个新的 CSS 属性旨在做 transform 所做的事情，制作更流畅和更优化的动画。

请注意：

will-change 旨在用作最后的手段，在为了尝试处理现有的性能问题。它不应该用于预测性能问题。

另一种可能的解决方案（阅读 hack）是欺骗浏览器使用 GPU 而不是 CPU，如本答案所示（参见其 p.1）：

CSS `will-change` - how to use it, how it works

更新

如果height 是auto 或类似的，这将适用于max-height 技巧，这是我的几个答案，展示了操作方法：

如果以上都不适用，最后的手段是使用一个小脚本并动态创建样式（下面的链接），或者将它们设置为内联。

【讨论】：

will-change 看起来很有趣，但我看不出它在这里是如何应用的。它看起来像一个优化。在这种情况下，如果我使用will-change: height，那么我是否还需要更改高度属性而不是使用变换？
@AndrewEisenberg 是的，这是正确的。使用will-change，您可以告诉将更改的属性，然后在您的动画中使用相同的属性。
那行不通。正如我上面提到的，div 的实际高度是动态确定的。所以，我不能使用height，尽管我正在寻找一个使用max-height 的解决方案。 stackoverflow.com/questions/3508605/…
@AndrewEisenberg 误解了你的意思，现在我更新了我的答案以涵盖这个角度，还有一个脚本，......所以现在应该涵盖所有选项:)
谢谢。最后，我们决定使用具有固定的大值的max-height。如果这不起作用，我们可能会转向脚本解决方案，在该解决方案中我们在动画开始之前立即计算高度，尽管我们希望有一个纯 css 解决方案。由于您的建议与我们最终所做的非常接近，而且我从您的回答中学到了很多东西（即使我没有直接使用它），我会奖励您的答案。