2

私はスムーズなアニメーションを得るために、ウェブ上で何時間も検索して費やしてきました.

translate3d プロパティを使用して以下のような要素プロパティを設定すると、ハードウェア CPU アクセラレーションが自動的にトリガーされるというのは正しいですか?

.someclass {
    /*does it trigger hardware cpu acceleration*/
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
}

これを設定した後、3d プロパティをアニメーション化する必要がありますか? または、CSS プロパティをアニメーション化できますか。

これをアニメーション化するには、別のクラスがあります

.connectanimation {
    -moz-transition: all .7s ease;
    -moz-transition: all .7s ease;
    -ie-transition: all .7s ease;
    -o-transition: all .7s ease;
    transition: all .7s ease;
}

次に、jQuery を使用して div 要素をアニメーション化します。

jQuery('#somedivid').on('mouseover', function() {
    jQuery(this).removeClass('connectanimation').addClass('connectanimation');
    jQuery(this).css("margin-top","100px");  // a normal css transition 
    //jQuery(this).css('MozTransform', 'translate3d(0px, 100px, 0px)');  // or this way?
});

私はここでそれを正しい方法でやっていますか？最高のパフォーマンスを得るには、何を使ってアニメーション化すればよいでしょうか? もしそれがtranslate3dの方法だったら..それなら、operaやchromeなどの他のブラウザをサポートするために、コードに余分な行がたくさんあるでしょうか?

よろしく、

クリス。

4

1 に答える 1

1

すべての 3D プロパティは、モバイルおよびデスクトップ デバイスでハードウェア アクセラレーションされます。ただし、Webkit と Firefox (ごく最近) のみが 3D 変換プロパティをサポートしています。

于 2012-05-14T16:57:58.540 に答える