Question

我的应用程序上有一个抽屉菜单，它在桌面上运行得很好，但在任何移动设备上我看到一个丑陋的混蛋。

在标题中，我有一个布尔值，在点击汉堡包时将其设置为true / false，这会将out类添加到.container滑出它。抽屉对于位于右上方的页面是绝对的，当外面的类在容器上时，它向右移动280px，露出抽屉。

这里是简化的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

您可以尝试使用2d变换，它应该更流畅

-ms-transform: translate(-280px,0); /* IE 9 */
-webkit-transform: translate(-280px,0); /* Safari */
transform: translate(-280px,0); /* Standard syntax */

Answer 2

考虑使用TweenMax。它是一个JS动画库，可以很好地与Angular配合使用并优先考虑性能。你可以在这里查看：

http://greensock.com/

即便是谷歌推荐它： https://developers.google.com/web/fundamentals/look-and-feel/animations/css-vs-javascript?hl=en

例如，以下是您将如何在Angular中的TweenMax中执行的操作

function(){
    TweenMax.to(someDomElementAsVariable, 0.3, {
        right:"350px"
    });
};

该函数会在0.3秒内将someDomElementAsVariable的'right'值更改为350px。

Answer 3

您需要使用3D变换。

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

当处理在屏幕上显示内容时，其背后的计算都可以通过CPU或GPU（也称为图形卡）完成。通常，您应该尽可能多地依赖GPU来完成与显示相关的任务......特别是对于动画等任务。

如何确保动画在GPU上以硬件模式运行？通过   使用translate3d！使用translate3d转换元素时，   该元素在基于Webkit的浏览器（如Chrome）中位于GPU国家/地区   和Safari（这是你的iPhone和iPad使用的）。

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

https://jsfiddle.net/asmsomtw/

来自小提琴的重要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);
}

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

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

在移动设备上滑出抽屉差的FPS

3 个答案: