在 Chrome 中无法获得 60fps 的不透明度过渡答案

【问题标题】：Can't get 60fps on opacity transition in Chrome在 Chrome 中无法获得 60fps 的不透明度过渡
【发布时间】：2014-01-14 10:05:18
【问题描述】：

我想要 60fps 或更好的不透明度过渡，并且正在使用 Chrome 开发工具时间线进行测试。我创建了一个 jsfiddle (http://jsfiddle.net/jnoody/Zt8nd/) 来演示，但基本上它只是一个 div，它每隔几秒就会切换一个类，并在两种状态的不透明度上进行转换。看起来不错，但我一直认为应该可以实现 60fps。

HTML：

<div id="fader"></div>

CSS：

#fader {
    height: 1000px;
    width: 1000px;
    background-color: grey;
    opacity: 1;
    transition: 1s opacity;
}

#fader.fadeOut {
    opacity: 0;
    transition: 1s opacity;
}

JavaScript：

var fader = document.getElementById('fader');
setInterval(function () {
    fader.classList.toggle('fadeOut');
}, 2000);

我也尝试过 null 变换 hack，但无论哪种方式，它似乎都在它自己的层中（使用“渲染复合边框层”）。

【问题讨论】：

还有，你是如何测量 fps 的？
您是不是要在 1 秒内说出 fadeOut 和 fadeIn 60 次？正如@jfriend00 所问，你的帧长是多少？
@sanjeevmk - 查看 CSS。每个转换为 1 秒长。 fadeIn 1 秒，1 秒暂停，然后 fadeOut 1 秒，等等...
@jfriend00 是的。也许 OP 希望转换在 1 秒内发生 60 次，即每次转换长度为 1/60s。他可能会将这种想法与每秒帧数混淆。
我正在使用 chrome 开发工具帧时间线测量 FPS。我不希望过渡在 1 秒内发生 60 次。我想要一个 1 秒的过渡来达到 60fps。

标签： css google-chrome css-transitions google-chrome-devtools opacity

【解决方案1】：

不确定这是否有帮助，但我确实在小提琴中获得了 60fps，进入全窗口（即附加 /show 到小提琴）

只有一瞬间帧速率下降，但我相信那是 javascript 执行的时候（因此，与可能的 GPU 加速无关）

【讨论】：