1

重複の可能性:
jQuery フェードインまたは CSS3 アニメーションを使用する方が良いですか?
何が速いですか？CSS3 トランジションまたは jQuery アニメーション?

私はアニメーションをやろうとしていますが、スピードが重要です。私は2つの方法を試しましたが、どちらもうまくいきましたが、どちらがより効果的か知りたいです.

方法 1: Jquery.animate() の使用 私のコードは次のようになります。

$("div").animate({opacity: "show"}, 100, "linear", function() {
    console.log("Animation Complete");
});

方法 2: setTimeOut で Css トランジションを使用する: コードは次のようになります。

$("div").addClass("hidden") //On Page load

次に、フェードインをアニメーション化します。

setTimeout(function () {
    $("div").removeClass('hidden');
}, 100);

Hidden には次のスタイル プロパティがあります。

.hidden { opacity: 0 !important; }

どちらもかなりうまく機能しますが、どちらがより効率的/優れているかを知りたいです。

4

4 に答える 4

2

JavaScript アニメーションがトランジションにない何かを提供しない限り、トランジションを使用してください。

トランジションはブラウザ レベルで実装され、場合によってはハードウェア アクセラレーションが適用されるため、通常は可能な限り高速にする必要があります。

さらに、コードははるかに単純です。

于 2013-01-22T19:46:34.483 に答える
1

トランジションはブラウザにネイティブに実装され、多くの場合ハードウェア アクセラレーションを使用するため、パフォーマンスが大幅に向上します。Rich Bradshawのブログで、この jQuery animate vs CSS transitions performance comparison demoを参照してください。デフォルトでトランジションを使用します。必要に応じて、古いブラウザーのフォールバックとしてのみ jQuery を使用してください。

この記事には、ハードウェア アクセラレーションを含む、CSS トランジションとパフォーマンスに関する優れた議論があります。

于 2013-01-22T19:51:58.980 に答える
0

そんな方にはアニメイトがおすすめです。setTimeout()css クラスはしばらくするとすぐに削除されますが、animate徐々にフェードイン/フェードアウトします。

于 2013-01-22T19:47:08.193 に答える
0

フェードアウト時間が 100 ミリ秒を超える場合は、jquery アニメーションを使用すると役立ちます。

于 2013-01-22T19:50:43.490 に答える