javascript - 使用 css3 : opacity transition 处理移动设备上的 "Rasterize Paint"延迟

Question

我正在做一个用户在模式之间来回切换的元素。我试图通过 css 将不透明度从 0 转换为 1 来做到这一点。但是，我注意到我的转换速度非常慢。

我的一些转换有大约 900 毫秒到 2,000 毫秒的滞后延迟，所以我使用 chrome 远程开发工具将我的手机连接到我的笔记本电脑 https://developer.chrome.com/devtools/docs/remote-debugging并开始记录性能事件 https://developer.chrome.com/devtools/docs/timeline

这是从手机触发的记录事件的图像。黄色 block 是 jQuery 单击事件处理程序触发，黄色条纹属于 jQuery.animate() 函数。然而，底部的绿色 block 几乎有 2 秒长，它被标记为“Rasterize Paint”。右边的紫色条子是实际发生的动画。(编辑:jquery.animate() 不同于同时发生的 css 动画。我在事件处理程序中添加了一个类，用于更改具有 transition: opacity 300ms 的元素的不透明度设置)

“栅格化绘画”是什么意思？为什么这需要这么长时间？我该怎么做才能避免这种情况？

编辑:这是我正在运行的页面的 fiddle 。我无法使 fiddle 具有元标记，因此它在移动设备上可能会有额外的 300 毫秒延迟。我建议在选择页面上最慢的转换“Archery”后完成“Got It! -> Fighter -> Accept -> Archery”步骤。这是为什么？我假设分层的不透明度使它非常慢，但我仍然不确定。 https://jsfiddle.net/2fLb1fd2/4/

.step {
  position: absolute;
  width: 100%;
  max-width: 650px;
  background: rgba(16, 16, 16, 0.8);
  -webkit-transition: opacity 300ms linear, top 300ms linear;
     -moz-transition: opacity 300ms linear, top 300ms linear;
       -o-transition: opacity 300ms linear, top 300ms linear;
          transition: opacity 300ms linear, top 300ms linear;
  opacity: 0;
  top: -100px;
  left: 0;
  right: 0;
  margin: 30px auto 20px;
  padding: 20px 20px;
  color: white;
  pointer-events: none;
  text-align: center;
}
.step.showing {top:0;opacity:1;pointer-events:auto;}

Answer 1

这里的问题可能不是不透明度，不透明度是使用 CSS 制作动画的非常便宜的属性(性能方面)。但是，您正在为 top 属性设置动画，这将在它设置动画的每一帧触发回流。

为了使动画更流畅，您应该为 transform: translateY(x); 而不是 top 属性设置动画。