android - 如何在移动设备上以 CSS 或 Javascript 平滑地设置高度动画

Question

我正在为移动设备开发一个 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我们正在操作的容器之后的容器不会自动向下移动。这可以手动修复，但很麻烦。

非常感谢！

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。

看一下这个...

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