モバイルデバイスでCSSまたはJavaScriptの高さをスムーズにアニメーション化する方法

Question

モバイルデバイス用のHTML5 Webアプリケーションを開発していて、滑らかなアニメーションで問題が発生しました。

基本的に、ユーザーがボタンをタップすると、ドロワー（高さが0pxのdiv）が所定の高さ（ピクセル単位）にアニメートされ、コンテンツがそのドロワーに追加されます。 Pinterestアカウントをお持ちの場合は、今のようにアニメーションをhttp://m.pinterest.comに表示できます（コメントボタンまたはRepinボタンをタップしてください）。

残念なことに、モバイルデバイスでは、Webkitトランジションがハードウェアアクセラレーションによる高さプロパティではないため、非常に遅く、アニメーションがギザギザです。ここで

は、いくつかのコードスニペットです：

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

携帯電話は非常に速く、デスクトップハードウェアと比較すると、実際にはかなり控えめなデバイスです。あなたのページがあるため、レンダリングリフローのそれを遅い理由は：div要素が成長すると

http://code.google.com/speed/articles/reflow.html

、それがプッシュすると、モバイルデバイスに高価であるすべての要素の位置を再計算する必要があります。

私はそれが妥協であることは知っていますが、アニメーションをスムーズにする唯一の方法はposition：absolute on .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/