如何在移动设备上的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 Transforms扩展了容器的子容器,这对我正在尝试做的事情来说是不可取的.-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%)'
});