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将扩大和收缩。我希望它下面的div随着顶部的折叠而向上移动。

如果我将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旨在作为最后的手段，为了尝试解决现有的性能问题。它不应该用于预测性能问题。

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

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

已更新

在height为auto或类似的情况下，这将与 max-height技巧一起使用，这是我的几个答案，显示操作方法：

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

CSS转换下方的div可以与上方的div一起移动吗？

1 个答案: