14

モバイルデバイス用のHTML5Webアプリケーションを開発していますが、スムーズなアニメーションで少し問題が発生しました。

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

残念な問題は、モバイルデバイスでは、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 Transformsで発生した、完全には理解できない問題は次のとおりです。

  1. Webkit Transformsはコンテナーの子をスケーリングしますが、これは私がやろうとしていることには望ましくありません。-webkit-transform: none子供に適用すると、この動作がリセットされないようです。
  2. Webkitトランスフォームは兄弟要素を移動しません。そのため、.pin操作しているコンテナの後のコンテナは自動的に下に移動しません。これは手動で修正できますが、面倒です。

どうもありがとう！

4

2 に答える 2

10

携帯電話は非常に高速であるため、デスクトップ ハードウェアと比較すると、実際には非常に質素なデバイスであることを忘れがちです。レンダリングのリフローが原因でページが遅くなる理由:

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

div が大きくなると、すべての要素の位置をプッシュして再計算する必要があり、モバイル デバイスにとってはコストがかかります。

妥協であることは承知していますが、アニメーションをよりスムーズにする唯一の方法は、.comment_wrapper; に position: absolute を配置することです。または、本当に滑らかなアニメーションが必要な場合は、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%)'
});
于 2011-10-14T03:09:29.060 に答える
0

traslate3d が必要です。デバイスが GPU をサポートしている場合は、GPU を使用する必要があります。

これをチェックしてください...

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

于 2013-06-05T02:50:50.893 に答える