現在、angular2のアニメーションを試していますが、標準のcssアニメーション/トランジションに比べてどのような利点があるのか疑問に思っていました。
例えば典型的なマテリアルデザインのカードと、ボックスの影付きのホバー効果。ほとんどのcssフレームワークは、:hoverおよびcss-transitionsを使用します。 angular 2アニメーションを使用することに特別な利点はありますか?
いくつかのcssアニメーションプロパティがGPUをそれほど起動しないため、遅延と遅延が発生することをどこかで読みました。 angle2アニメーションについてはどうですか?
質問は、実際にはもっと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
アニメーション中の属性の変更)。
答えは実際にはドキュメントにあります:
https://angular.io/guide/animations
Angularのアニメーションシステムを使用すると、純粋なCSSアニメーションに見られるのと同じ種類のネイティブパフォーマンスで実行されるアニメーションを構築できます。また、制御を容易にするために、アニメーションロジックをアプリケーションコードの残りの部分と緊密に統合することもできます。
また、ブラウザのオーバーロードを回避したり、アニメーションを連鎖させたりするために、アニメーションの長さを追跡する必要性を取り除きます。
一般的に、あなたが単純な小さなものを持っているなら、CSSはおそらくもっと簡単です。ただし、アプリ内で一貫してアニメーションを実行している場合、Angular Animations)を使用することで、わずかなマイナス面で多くのパワーを得ることができます。