Question

我正在为移动设备开发HTML5网络应用程序，并且在动画流畅方面遇到了一些麻烦。

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

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

以下是一些代码段：

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>

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;
}

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);
});

屏幕截图：http://imgur.com/nGcnS,btP3W

Screenshot of the question

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

Webkit转换扩展容器的子容器，这对我正在尝试做的事情是不可取的。 -webkit-transform: none适用于孩子似乎没有重置此行为。
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/

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

2 个答案: