代码之家 › 专栏 › 技术社区 › Andrew Eisenberg

css转换下面的div可以和上面的div一起移动吗?

css-transforms css-animations css-transitions css3 css

1

Andrew Eisenberg · 技术社区 · 6 年前

我正在使用css转换将一堆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如何平滑移动?

1 回复 | 直到 6 年前

1

0

Asons Oliver Joseph Ash 6 年前

与 transform 你不能那样做,因为当一个元素转化 ,周围的元素将看不到dom中的任何更改,因为dom没有发生任何变化。

你所能做的就是准备浏览器 height 会改变的,有了这个属性 will-change: height

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

这个新的css属性的目的是 转型 可以,使动画更平滑、更优化。

但请注意:

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

另一个可能的解决方案(阅读乱劈 ,即欺骗浏览器使用GPU而不是CPU,如下面的答案所示(参见第1页):

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

更新

如果是 高度 是 auto ,或类似的,这将与 max-height 戏法 ,下面是我的几个答案,展示了如何:

如果上述方法都不适用,最后一种方法是使用一个小脚本,动态地创建一个样式(下面的链接),或者内联地设置它们。