1

左側に1つの大きなdivがあり、右側に6つの小さなものが並んでいるページデザインに取り組んでいます。右側の div の 1 つをクリックすると、その div のコンテンツが左側に遷移し、以前の大きな div が右側に表示されます。そのために、左側のdivをクリックした要素の位置に移動し、非表示にしてから元の位置に戻すアニメーションをJQueryで作成しました。私が抱えている問題は、Chrome では問題なく動作することですが、Firefox で試してみると、アニメーションが遅れています。さまざまなブラウザーでアニメーションのパフォーマンスを向上させるにはどうすればよいですか?

$(document).ready(function() {
  $(".small").click(function() {
    var offset = $(this).offset();
    var pusher = offset.top - 54;
    $("div.left-side").css({'height': '129', 'left': '40%', 'top':  offset, 'opacity': '0'});
    $("div.left-side").animate({'left': '0%','top': '0', 'height': '800', 'opacity': '1'}, 500);
    $('html, body').animate({scrollTop: $(".container").offset().top}, 500);
  });
});

私が取り組んでいる現時点での完全なコードは次のとおりです 。https : //github.com/renepickhardt/metalcon/tree/feature/frontend/basic_page_templateそしてstyle.css。私は質問を本質に要約しようとしましたが、それは十分に明確ではなかったと思います.

4

1 に答える 1

1

これは、HTML の残りの部分に依存する非常に重いアニメーションのようです...

とにかくtransform: translate3d(0, 0, 0)、 .css() 部分に追加しようとすることができます:

$("div.left-side").css({'transform': 'translate3d(0, 0, 0)', 'height': '129', 'left': '40%', 'top':  offset, 'opacity': '0'});

ただし、ブラウザーのプレフィックスを忘れないでください: -webkit、-moz、...古いブラウザーを想定している場合。

このトリックは実際にはハードウェア アクセラレーションを強制的に GPU に送信し、より高速にレンダリングしますが、すべてのブラウザーや古いブラウザーでは機能しません...

于 2013-09-14T14:25:46.100 に答える