css 变换下方的 div 能否与上方的 div 一起移动？

Question

我正在使用 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 将膨胀和收缩。我希望它下面的 divs 在顶部折叠时向上移动。

如果我将 transform 换成 height，就像这样：

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

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

下面的div怎么能和上面的div一起顺畅移动呢？

Answer 1

使用 transform 你将无法做到这一点，因为当一个元素被 转换后 ，周围的元素在 DOM，因为 DOM-明智的是什么都没有发生。

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

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

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

不过请注意：

will-change is intended to be used as a last resort, in order to try to deal with existing performance problems. It should not be used to anticipate performance problems.

另一种可能的解决方案（阅读 hack）是诱使浏览器使用 GPU 而不是 CPU，如该答案所示（参见其第 1 页） :

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

已更新

如果 height 是 auto 或类似的情况，这将与 max-height 技巧一起使用 ，这里是我的几个答案，展示了操作方法：

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

How to prevent css from getting converted to inline css

css 变换下方的 div 能否与上方的 div 一起移动？

Can divs below a css transform move along with divs above?

css

css-transitions

css-transforms

css-animations