如何在移动设备上的CSS或Javascript中平滑地设置动画高度

Question

我正在为移动设备开发HTML5 Web应用程序，并且在动画流畅的情况下遇到了一些麻烦。

基本上，当用户点击按钮时，抽屉（高度为0px的div）应该设置为给定高度（以像素为单位）的动画，并且内容将附加到该抽屉。 如果你有一个Pinterest帐户，你可以在http://m.pinterest.com上看到现在的动画（点击评论或列表按钮）。

不幸的问题是，在移动设备上，Webkit Transitions不是硬件加速的高度属性，因此它非常滞后，动画也是锯齿状的。

以下是一些代码段：

1. HTML ：...

    <div class="pin"> <a class="comment_btn mbtn" href="#" title="" ontouchstart="">Comment</a> <div class="comment_wrapper"> <div class="divider bottom_shadow"></div> <div class="comment"> <!-- Content appended here --> </div> <div class="divider top_shadow" style="margin-top: 0"></div> </div> </div> <div class="pin"> ... </div> 

2. CSS ：

    .comment_wrapper { -webkit-transition: all 0.4s ease-in-out, height 0.4s ease-in-out; position: relative; overflow: hidden; width: 100%; float: left; height: 0; } .comment { background: #f4eeee; margin-left: -10px; padding: 10px; height: 100%; width: 100%; float: left; } 

3. Javascript （使用jQuery）：

    function showSheet(button, wrapper, height) { // Animate the wrapper in. var css = wrapper.css({ 'height': height + 'px', 'overflow': 'visible', 'margin-bottom': '20px', 'margin-top': '10px' }); button.addClass('pressed'); } $('.comment_btn').click(function() { showSheet($(this), $(this).siblings('.comment_wrapper'), 150); }); 

4. 截图 ： http ： //imgur.com/nGcnS,btP3W

以下是我在Webkit Transforms中遇到的问题，我无法弄清楚：

1. Webkit转换扩展容器的子容器，这对我正在尝试做的事情是不可取的。 -webkit-transform: none应用于子-webkit-transform: none似乎没有重置此行为。
2. Webkit Transforms不会移动兄弟元素。 因此，在我们操作的容器之后的.pin容器不会自动向下移动。 这可以手动修复，但这很麻烦。

非常感谢！

Answer 1

随着移动电话如此之快，当您将它们与桌面硬件进行比较时，很容易忘记它们实际上是非常简陋的设备。 由于渲染回流，您的页面速度慢的原因：

http://code.google.com/speed/articles/reflow.html

当div增长时，它必须推动并重新计算所有元素的位置，这对于移动设备来说是昂贵的。

我知道这是一个妥协，但你可以使动画更顺畅的唯一方法是将position：absolute放在.comment_wrapper上; 或者，如果你真的想要黄油平滑的动画，让它从屏幕下方用css变换弹出，即

.comment_wrapper {
  height: 200px;
  position: absolute;
  width: 100%;
  bottom: 0;
  -webkit-transform: translate(0, 100%);
}


var css = wrapper.css({
    '-webkit-transform': 'translate(0, 100%)'
});

Answer 2

你想要traslate3d。 如果设备支持GPU，应使用GPU。

看一下这个...

http://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/