如何在移動設備上平滑地在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/