如何在移动设备上平滑地在CSS或Javascript中创建高度

Question

我正在为移动设备开发HTML5 Web应用程序，并遇到了一些平滑动画的麻烦。基本上，当用户点击一个按钮时，抽屉（高度为0px的div）应该给定高度的动画（以像素为单位），并且内容将被附加到该抽屉中。如果你有一个Pinterest帐户，你可以看到现在的动画，在http://m.pinterest.com（点击Comment或Repin按钮）。

不幸的问题是，在移动设备上，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遇到的问题就是把这个我不能完全弄清楚：

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/