web-dev-qa-db-ja.com

angular 2アニメーションvs CSSアニメーション-いつ何を使用しますか?

現在、angular2のアニメーションを試していますが、標準のcssアニメーション/トランジションに比べてどのような利点があるのか​​疑問に思っていました。

例えば典型的なマテリアルデザインのカードと、ボックスの影付きのホバー効果。ほとんどのcssフレームワークは、:hoverおよびcss-transitionsを使用します。 angular 2アニメーションを使用することに特別な利点はありますか?

いくつかのcssアニメーションプロパティがGPUをそれほど起動しないため、遅延と遅延が発生することをどこかで読みました。 angle2アニメーションについてはどうですか?

29
Han Che

質問は、実際にはもっとjavascriptアニメーションvs cssアニメーションです(angular2のアニメーションはjavascript-animationに基づいているため)。

答えは、可能な場合-CSSアニメーションを使用することです

最新のブラウザは、CSSアニメーションに 異なるスレッド を使用するため、javascript-threadはCSSアニメーションの影響を受けません。

HTML5 Animation Speed Test を使用して、ブラウザーでさまざまなフレームワーク(javscriptベース)VS CSSアニメーションのパフォーマンスを確認できます。

一般に:

ブラウザは、レンダリングフローを最適化できます。要約すると、可能な場合は常にCSSトランジション/アニメーションを使用してアニメーションを作成しようとする必要があります。アニメーションが本当に複雑な場合は、代わりにJavaScriptベースのアニメーションに頼らなければならない場合があります。

Angular2アニメーションに関して具体的に知りたい場合は、ブラウザの要素を調べて、アニメーションにCSS(transition/animationFrameベースまたはjavascript)があるかどうかを確認してください(styleアニメーション中の属性の変更)。

27
Dekel

答えは実際にはドキュメントにあります:

https://angular.io/guide/animations

Angularのアニメーションシステムを使用すると、純粋なCSSアニメーションに見られるのと同じ種類のネイティブパフォーマンスで実行されるアニメーションを構築できます。また、制御を容易にするために、アニメーションロジックをアプリケーションコードの残りの部分と緊密に統合することもできます。

また、ブラウザのオーバーロードを回避したり、アニメーションを連鎖させたりするために、アニメーションの長さを追跡する必要性を取り除きます。

一般的に、あなたが単純な小さなものを持っているなら、CSSはおそらくもっと簡単です。ただし、アプリ内で一貫してアニメーションを実行している場合、Angular Animations)を使用することで、わずかなマイナス面で多くのパワーを得ることができます。

13
jkyoutsey