javascript - 使用变换 : scale is not appropriately hiding a div

Question

我试图在某些 Action 上隐藏带有动画的 div。我对它的初步检查如下所示:

.row {
  height: 50px;
  transition: height 200ms ease-in-out;
  &.hidden {
    height: 0;
  }
}

我的 DOM 结构如下( react ):

<div className={styles.container}>
  <div className={styles.row} />
  <div className={classnames(styles.row, { [styles.hidden]: !this.state.active })}
</div>

虽然这确实有效，但速度非常慢。我听说转换对于 CSS 中的过渡非常有效，所以我决定尝试以下方法。

.row {
  height: 50px;
  transform-origin: top;
  transition: transform 200ms ease-in-out;

  &.hidden {
    transform: scaleY(0);
  }
}

然而，在容器内，第二行仍然显示为一个 50px 的框，但检查员说它的高度为 0。

如何正确应用此转换来隐藏第二个框？

Answer 1

3D 转换非常高效，因为浏览器会将目标元素合成到它们自己的图层中，并将动画卸载到 GPU。 height甚至scaleY()不是 3D 转换，也不会受益于 GPU 加速(CPU 仍在处理它)。

回到你的例子 height ，您可以通过伪造的变换属性(如 transform: translateZ(0);)来强制浏览器使用 GPU 加速。 ( translateZ() 是 translate3d() 的 3D 分量，很像 scaleZ() 是 of scale3d() 的 3D 分量)。

这是一个快速演示:

document.querySelector('button').addEventListener('click', function() {
  document.querySelector('.row').classList.toggle('hidden');
});

.row {
  background-color: green;
  height: 50px;
  overflow: hidden;
  transition: height 200ms ease-in-out;
  transform: translateZ(0); /* or translate3d(0,0,0), rotateZ(360deg), etc. */
}

.row.hidden {
  height: 0;
}

button {
  left: 0;
  position: absolute;
  top: 100px;
}

<div class="row">Some text</div>

<button>Toggle Row Visibility</button>

有了添加的属性，浏览器应该利用 GPU 加速，显着改善动画效果。参见 this question有关转换和 GPU 加速的更多信息。

我会建议先尝试这个，看看它是否足以加快您应用中的动画速度。您也可以尝试添加 will-change 属性，尽管这是工作草案的一部分并且目前是非标准的。