CSS转换过渡 - 使用'px'比'百分比'更平滑/更高效

Question

我最近一直在研究改进我网站上的动画 - 更具体地说是移动设备上的导航下拉菜单.

在这方面,我偶然发现了以下案例,我希望能够获得更深入的知识.

情况是,在转换/动画时transform: translate3d(),似乎浏览器在使用%而不是使用时需要更多计算px.例如,在我的测试中,似乎从转换transform: translate3d(0, 500px, 0)到transform: translate3d(0,0,0)需要更少的计算并且运行比转换更平滑transform: translate3d(0, 100%, 0).

更新:经过进一步测试,我发现使用100vh/ 100vw绕过/减轻了使用百分比的问题.在元素具有窗口的已知百分比宽度或全宽的情况下,这可以是usefyk,从而改善性能.实际上,似乎使用此值的行为就像px在Chrome中分配了值一样.

这是每个动画的时间轴的几张图片.时间线是使用"性能"下的Google Dev工具获得的.为了更好地显示差异,Chrome开发工具的性能受限于"低端移动"(6倍CPU减速).

使用百分比变换:

使用像素(px)进行变换:

从图像中可以看出,在使用%而不是px确定转换时,似乎有更多的渲染和绘画正在进行.很有意义的是,浏览器必须计算每个帧的百分比值(我猜？),但与使用像素值相比,我感到惊讶的是它需要更多.

另请注意,图片中显示百分比时间轴的帧速率从未达到约60 fps,而是平均约为40 fps.

以下是复制案例的片段.有一个使用百分比,一个使用px.

$(document).on("click", function(){
$(".bb").toggleClass("active");
});

.aa{
  height:50px;
  background:blue;
  position:fixed;
  top:0;
  width:100%;

}
.bb{
  position:fixed;
  top:0px;
  background:none;
  height:100%;
  width:100%;
  left:0;
  transform:translateZ(0);
  overflow:hidden;
    pointer-events:none;
}
.cc{
  height:100%;
    transform:translate3d(0,500px,0);
    width:100%;
      transition:transform .5s ease-in;
      background:red;
}
.bb.active .cc{
  transform:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click the document to start animation<p>
<div class="bb">
<div class="cc">
<ul>
<li>Point one</li>
<li>Point two</li>
<li>Point three</li>
<li>Point four</li>
<li>Point five</li>
<li>Point six</li>
<li>Point seven</li>
</ul><ul>
<li>Point one</li>
<li>Point two</li>
<li>Point three</li>
<li>Point four</li>
<li>Point five</li>
<li>Point six</li>
<li>Point seven</li>
</ul>

</div>

</div>

$(document).on("click", function(){
$(".bb").toggleClass("active");
});

.aa{
  height:50px;
  background:blue;
  position:fixed;
  top:0;
  width:100%;

}
.bb{
  position:fixed;
  top:0px;
  background:none;
  height:100%;
  width:100%;
  left:0;
  transform:translateZ(0);
  overflow:hidden;
    pointer-events:none;
}
.cc{
  height:100%;
    transform:translate3d(0,100%,0);
    width:100%;
      transition:transform .5s ease-in;
      background:red;
}
.bb.active .cc{
  transform:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click the document to start animation<p>
<div class="bb">
<div class="cc">
<ul>
<li>Point one</li>
<li>Point two</li>
<li>Point three</li>
<li>Point four</li>
<li>Point five</li>
<li>Point six</li>
<li>Point seven</li>
</ul><ul>
<li>Point one</li>
<li>Point two</li>
<li>Point three</li>
<li>Point four</li>
<li>Point five</li>
<li>Point six</li>
<li>Point seven</li>
</ul>

</div>

</div>

为了解决使用百分比transform可能导致动画性能恶化的"问题" ,我提出了以下建议,这可能会提高性能.但是,我有兴趣听取其他意见,因为我不太确定这是否必要,为什么(？).

我正在做的基本上只是使用jQuery以transform像素而不是百分比来应用值.对于生产案例,自然需要更新窗口大小调整.

由此产生的时间表是:

$(document).ready(function(){
var bbWidth = $("#bb .cc").css('transform').split(',')[5].slice(0,-1);

$("#bb .cc").css("transform", "translate3d(0," + bbWidth + "px,0");
$(document).on("click", function(){
$("#bb").toggleClass("active");
});
});

.aa{
  height:50px;
  background:blue;
  position:fixed;
  top:0;
  width:100%;

}
#bb{
  position:fixed;
  top:0px;
  background:none;
  height:100%;
  width:100%;
  left:0;
  transform:translateZ(0);
  overflow:hidden;
}
.cc{
  height:100%;
    transform:translate3d(0,100%,0);
    width:100%;
      transition:transform .5s ease-in;
      background:red;
      position:absolute;
      top:0;
}
#bb.active .cc{
  transform:none!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bb">
<div class="cc">
<ul>
<li>Point one</li>
<li>Point two</li>
<li>Point three</li>
<li>Point four</li>
<li>Point five</li>
<li>Point six</li>
<li>Point seven</li>
</ul><ul>
<li>Point one</li>
<li>Point two</li>
<li>Point three</li>
<li>Point four</li>
<li>Point five</li>
<li>Point six</li>
<li>Point seven</li>
</ul>

</div>

</div>

题:

• 我遇到这种行为是否正确(指定值的px表现要好于%),如果是这样,为什么会发生这种情况？如前所述,对我来说它应该是有道理的,但我真的缺乏一些技术/深入的解释.
• 有没有比我的建议更好的绕过这个问题的方法？transform: translate()如果你"不能"使用%并且如果你想同时想要平滑的动画,那么使用例如隐藏屏幕外的导航是非常间接的.

Answer 1

\n

我遇到这种行为是否正确（以 px 为单位分配值比 % 更好），如果是，为什么会发生这种情况？正如前面提到的，这对我来说应该是有道理的，但我确实缺乏一些技术/深入的解释。

\n

\n\n

确实是正确的。像素是绝对值（即不依赖于任何东西，并表示为\xe2\x80\x98，如\xe2\x80\x99）。百分比是相对值，这意味着它们必须依赖于一些其他值才能产生结果。因此，每次分配百分比值时，它都必须获取其相对值才能执行计算。\n当使用像素进行平移时，您只需更改平移值，但使用百分比时，您必须获取元素的首先尺寸，然后应用平移。必须对每个动画帧执行此操作。

\n\n

为了缓解此问题，您只需在动画之前重新计算元素的尺寸一次。然后用于!important覆盖样式属性中设置的内容。代码片段中的代码正是这样做的。

\n\n

另请注意，我添加了一个resize侦听器。如果窗口大小被调整，那么您的元素就会被隐藏，这是必需的。

\n\n

\r\n

\r\n

$(function(){\r\nvar $el = $("#bb");\r\n$(document).on("click", function(){\r\n  var height = $el.outerHeight();\r\n  $el\r\n    .css(\'transform\', \'translateY(\' + height + \'px)\')\r\n    .toggleClass("active");\r\n});\r\n$(window).on(\'resize\', function() {\r\n  $el.removeClass(\'active\').removeAttr(\'style\');\r\n});\r\n});

\r\n

#bb{\r\n  position:fixed;\r\n  top:0px;\r\n  background-color: red;\r\n  height:100%;\r\n  width:100%;\r\n  left:0;\r\n  overflow:hidden;\r\n  transform: translateY(100%);\r\n  transition: transform .5s ease-in;\r\n}\r\n#bb.active\r\n{\r\n  transform: translateY(0px) !important;\r\n}

\r\n

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>\r\n<div id="bb">\r\n<div class="cc">\r\n<ul>\r\n<li>Point one</li>\r\n<li>Point two</li>\r\n<li>Point three</li>\r\n<li>Point four</li>\r\n<li>Point five</li>\r\n<li>Point six</li>\r\n<li>Point seven</li>\r\n</ul><ul>\r\n<li>Point one</li>\r\n<li>Point two</li>\r\n<li>Point three</li>\r\n<li>Point four</li>\r\n<li>Point five</li>\r\n<li>Point six</li>\r\n<li>Point seven</li>\r\n</ul>\r\n\r\n</div>\r\n\r\n</div>

\r\n

\r\n

\r\n

\n