html - CSS 过渡不适用于 scale(0) + chrome 45 中的硬件加速？

Question

当硬件加速被激活(通过 will-change 或通过 translateZ(0))并且你正在为 制作动画时，CSS 过渡不起作用>scale(0) 在 chrome 45 中。(版本 45.0.2454.85(64 位))

(Firefox 40 使用 will-change，但不使用 translateZ(0))

演示:http://codepen.io/zapdev/pen/ojbdVb (启用硬件加速和隐藏动画停止工作)

我目前的解决方法:

.hide {
    transform: scale(0.0002);
    opcacity: 0;
    transition: transform 400ms, opacity 0ms 400ms;
    pointer-events: none;
}

编辑: 我在 MacOS X 上，我的 WebGL 渲染器是 "Intel Iris Pro OpenGL Engine"

此外:Chrome 47.0.2511.0 canary(64 位) 与 will-change 一起工作(类似于 Firefox 40)，但与 translateZ(0) 不兼容。看起来 will-change 通常是硬件加速的方式。

Answer 1

浏览器不知道如何读取转换覆盖。 当你使用 transform:translateZ('value');你覆盖了比例。

要让它工作，你需要用 scale 和 translateZ 初始化所有的 div，这样它就可以在所有方面工作。

VIEW DEMO

div{
  transition: transform 400ms;
  transform:scale(1) translateZ(0);
}

div:hover{
  transform: scale(1.4) translateZ(0);
}

div.hide{
  transform: scale(0) translateZ(0);
}