web-dev-qa-db-ja.com

Angularアニメーションの目的は何ですか？

私は今しばらく疑問に思っていましたなぜAngular CSSアニメーションよりもアニメーションを使用すべきか。使用する前に考慮すべき領域はほとんどありません。

性能

最初のステップで私はこれを見つけました question これは物事のパフォーマンス面のみを扱います。受け入れられた答えは私にとって満足のいくものではありません。なぜなら、CSSアニメーションを可能な限り使用して、アニメーションを別のスレッドで実行するなどの最適化を適用できるようにする必要があると述べているからです。 Angular documentation 状態なので、これは真実ではないようです

角度アニメーションは標準のWeb Animations APIの上に構築されますであり、それをサポートするブラウザーでネイティブに実行されます。

（エンファシス鉱山）

Web Animations API Draft を見ると、シートで指定されたCSSと同じ最適化がWeb Animationsに適用できることがわかります。

RequestAnimationFrame [HTML]を使用してECMAScriptを使用してアニメーションを実行することは可能ですが、そのようなアニメーションは、CSSカスケードでの表示方法や、アニメーションを別のスレッドで実行するなどのパフォーマンス最適化の点で、宣言型アニメーションとは異なる動作をします。 Webアニメーションを使用するプログラミングインターフェイス、アニメーションを作成可能スクリプトから宣言型アニメーションと同じ動作とパフォーマンス特性を持つです。

（強調鉱山再び）

IEはWebアニメーションをサポートしていません）などの一部のブラウザを除き、Angularアニメーションまたはその逆のCSS宣言を使用する理由はありますか？私はそれらを交換可能なパフォーマンス面で見ている。

アニメーションをより細かく制御

これはAngularアニメーションの引数として見えるかもしれません。なぜなら、 アニメーションを一時停止 またはJS変数を使用できるなどのためです。しかし、CSSなどを使用している場合も同じです。 animation-play-state: pauseまたはJSで指定されたCSS変数を使用します。 documentation を参照してください。

JSコードでCSS変数を設定するのは不便かもしれませんが、Angular=アニメーション。これらは通常@Componentanimationsフィールドで宣言され、ドンアニメーション状態データバインドプロパティを介した場合を除き、インスタンスフィールドへのアクセス権はありません（もちろん、AnimationBuilderを使用してアニメーションを作成しない場合、これはあまり便利でも美しくもありません）。

他のポイントは、Web Animations APIで 検査、デバッグ、またはテスト アニメーションが可能ですが、Angularアニメーションでこれがどのように可能かわかりません。もしそうなら、どのように私に教えてもらえますか？そうでない場合、私は本当にコントロールのためにCSSのものよりもAngularアニメーションを使用することの利点を見ないでくださいいずれか。

クリーナーコード

たとえば、 here を読んだことがあります。「通常の」スタイルからアニメーションを分離することは、実際には動作とプレゼンテーションを分離するということです。 これらの責任を混合したスタイルシートで実際にアニメーションを宣言していますか？常に反対の方法を見ました。特に@ComponentアニメーションのCSSルールを見ると、CSS宣言もあると感じました多くの場所。

では、Angularアニメーションとはどうですか？

  • 他のスタイルからアニメーションを抽出するのは単なる便利なユーティリティですか、それとも機能的に価値のあるものをもたらしますか？
  • Angularアニメーションの使用は特別な場合にのみ効果がありますか、それともチームがそれを最後まで進めることを選択した慣習ですか？

ここでは、Angularアニメーションを使用することの具体的な利点について説明します。

javascriptcssangularanimationangular-animations
44
Dan Macák

だから私はいくつかの研究を行ったが、Angularアニメーションのパフォーマンスに関して（上記の質問で既に述べたように）、Angularアニメーションfeature-wiseを使用する非常に良い引数があります。これは、CSSをシートにのみ配置したい純粋主義者にとっては十分なはずです。以下。

Angularアニメーション、それらの大部分は Angular animations documentation ：

  1. Transition styles-これらのスタイルは、ある状態から別の状態への遷移中にのみ適用されます。要素がアニメーション化されている間のみ適用されます。

    transition('stateA => stateB', [style({...}), animate(100)])

    Angularなしで同じことをしようとすると、遷移と同じ期間の 'stateB'スタイルのCSSアニメーションが必要になるか、一時的なスタイルを一時的に割り当て、JSを介してアニメーション期間後にそれらを削除します。

  2. voidstate（ documentation ）-追加または削除される要素をアニメートしましょうDOM。

    transition('stateA => void', animate(...))

    これは非常にクールです。以前は、追加をアニメーション化するのに十分簡単でしたが、削除はより複雑であり、アニメーションをトリガーし、最後まで待機してからDOMから要素を削除する必要があり、すべてJSでした。

  3. 自動プロパティ計算'*'（ ドキュメント ）- 動的な高さを持つ要素の高さの遷移 のような伝統的に困難なアニメーションを実行できます。この問題は、特にCSSの純粋主義者を悩ませ、JSが要素の現在の高さをチェックし、正確な高さを要素や他の手順に割り当てて完璧なアニメーションを実行する必要がありました。しかし、今ではAngularでこれは次のように簡単です：

    trigger('collapsible', [
  state('expanded', style({ height: '*' })),
  state('collapsed', style({ height: '0' })),
  transition('expanded <=> collapsed', animate(100))
])

    アニメーションはスムーズです。これは、要素のactual heightがトランジションに使用されるためで、一般的な max-height solution 。

  4. Animation callbacks（ documentation ）-これは、CSSアニメーションでは不可能だったものです（setTimeoutでエミュレートできない場合）と便利です。デバッグ用。

  5. 質問で述べられているとは異なり、Angular animationsを参照してください。 この質問 。 こちらはMDN のように、DOM APIを介してCSS変数を操作するよりもはるかに使いやすいと思います。

上記の機能のいずれかが必要な場合は、Angularが最適です。また、コンポーネントで管理するアニメーションが多数ある場合、これは私の個人的な意見です。アニメーションをAngular=のようにシートに配置するよりも、さまざまな要素の状態間の関係を確認するのが難しくなります。

37
Dan Macák