14

我正在为移动设备开发一个 HTML5 Web 应用程序，但在流畅的动画方面遇到了一些麻烦。

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

不幸的问题是，在移动设备上，Webkit 过渡不是硬件加速的 height 属性，因此它非常滞后并且动画是锯齿状的。

以下是一些代码片段：

  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 Transforms 缩放容器的子级，这对于我正在尝试做的事情是不可取的。-webkit-transform: none应用于孩子似乎不会重置此行为。
  2. Webkit 变换不会移动同级元素。因此，.pin我们正在操作的容器之后的容器不会自动向下移动。这可以手动修复，但很麻烦。

非常感谢！

4

2 回答 2

10

随着手机的速度如此之快，当您将它们与桌面硬件进行比较时，很容易忘记它们实际上是非常不起眼的设备。您的页面由于渲染重排而变慢的原因：

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%)'
});
于 2011-10-14T03:09:29.060 回答
0

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

看一下这个...

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

于 2013-06-05T02:50:50.893 回答