css - 滑出抽屉在手机上 FPS 差

Question

我的应用程序上有一个抽屉式菜单，它在桌面上运行良好，但在任何移动设备上我都看到一个丑陋的卡顿。

在 header 中，我有一个 bool 值，在单击汉堡包时将其设置为 true/false，这会将 out 类添加到 .container 中，将其滑出。抽屉相对于位于右上角的页面是绝对的，当 out 类在容器上时，它向右移动 280 像素，露出抽屉。

这里是简化的 html 和 css:

<div class="landing-page-container" ng-class="isMenuOut ? 'out' : ''">
<header/>
<main/>
<footer/>
</div>

<sidebar>

CSS:

.home-slide-menu{
  width: 280px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  overflow:hidden;
}

.landing-page-container{
  right:0;
  position: relative;
  transition: right 0.2s ease-in 0s;
}

.landing-page-container.out{
  right:280px;
  overflow: hidden;
}

这可能不足以帮助调试，但如果有任何危险信号，请告诉我，如果您需要更多信息，请告诉我。

Answer 1

您需要使用 3D 变换。

http://www.kirupa.com/html5/animating_movement_smoothly_using_css.htm

When dealing with displaying things on the screen, the calculations behind it all can be done either by the CPU or the GPU (aka graphics card). In general, you should rely on your GPU as much as you can for any display-related tasks...especially for tasks such as animation.

How do you ensure your animations run in hardware mode on the GPU? By using translate3d! When you transform an element using translate3d, that element is in GPU country in Webkit-based browsers like Chrome and Safari (which is what your iPhone and iPad use).

这是我做的一个简单的例子:

https://jsfiddle.net/asmsomtw/

来自 fiddle 的重要 CSS 片段

/* Transition effect and timing */
div {
    transform: translate3d(0, 0%, 0);
    transition: transform 500ms ease-in;
}

/* The transform applied by appended class that toggles drawer to hide */
.hide {
    transform: translate3d(-100%, 0, 0);
}

在您遇到卡顿问题的设备上尝试一下，然后将这些值交换为正确，就像您的原始实现一样，看看您是否能看出差异。

但不要滥用 GPU，要有选择地选择硬件加速。