[解決済み] Angularのアニメーションの目的は何ですか？

質問

以前から不思議に思っていたのですが なぜCSSアニメーションではなくAngularアニメーションを使うべきなのか？ . 私はそれらを使用する前に考慮すべきいくつかの領域を参照してください。

パフォーマンス

最初のステップで、私はこれを見つけました 質問 を見つけました。これは物事のパフォーマンス面のみを扱っています。受理された回答は私にとって満足のいくものではありません。 可能な限りCSSアニメーションを使用し、別スレッドでアニメーションを実行するような最適化が適用できるようにすべきです。 . これは正しいとは思えません。 Angular ドキュメント の状態だからです。

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

(強調)

そして、私たちが見るとき ウェブアニメーションAPIドラフト を見ると、シートで指定された CSS と同じ最適化が Web Animation に適用できることがわかります。

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

(再度強調)

IE のような一部のブラウザがウェブアニメーションをサポートしていないことを除けば は、AngularのアニメーションよりもCSSの宣言を使う理由、またはその逆はあるのでしょうか？ 私は、パフォーマンス的に交換可能だと考えています。

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

これはAngularのアニメーションの引数のように見えるかもしれません、なぜならあなたは アニメーションを一時停止する や JS 変数の使用などができるため、Angular のアニメーションのための議論に見えるかもしれませんが、同じことが、例えば CSS の animation-play-state: pause を使ったり CSS変数 JSで指定する場合は ドキュメントを参照してください。 .

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

もう一つのポイントは、Web Animations API を使って、以下のようなことが可能だということです。 検査、デバッグ、テスト しかし、私はこれがAngularアニメーションでどのように可能であるかわかりません。もし可能であれば、方法を教えていただけませんか？そうでない場合、私は本当に 制御のためにCSSのものよりもAngularのアニメーションを使用する利点も見当たりません。 .

よりクリーンなコード

私は、例えば はこちら では、アニメーションを通常のスタイルから分離することは、実際には動作と体裁を分離することであると述べています。 スタイルシートでアニメーションを宣言することは、本当にそれらの責任を混同しているのでしょうか？ 私はそれが常に他の方法であると見ました。 @Component のアニメーションのCSSルールを見ていると、CSSの宣言が一箇所多くなりすぎているような気がしました。

では、Angularのアニメーションはどうなのでしょうか？

• アニメーションを他のスタイルから抽出するための便利なユーティリティに過ぎないのか、それとも機能的に価値のあるものをもたらしてくれるのか？
• Angularのアニメーションの使用は、特別な場合にのみ利益をもたらすのでしょうか、それとも、チームがそれを使ってすべての道を行くことを選択する慣習なのでしょうか？

Angularのアニメーションを使用する具体的な利点についてお聞きしたいです。前もってみんなに感謝します。

どのように解決するのですか？

そこで、私はいくつかの研究を行い、Angularアニメーションのパフォーマンスについて賛成も反対も見つけられませんでしたが（上記の質問ですでに述べられているように）。 Angularのアニメーションを使用することは、機能的に非常に良い議論です。 これは、少なくとも特定のケースでは、CSSをシートの中にだけ持っていたいという純粋主義者には十分なものでしょう。

Angularのアニメーションの説得力を高める便利な機能をいくつか挙げてみましょう。それらのほとんどは Angular アニメーションドキュメント :

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

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

   同じことをCSSだけでやろうとすると、どの前の状態が次の状態につながっているかという点で表現力が乏しくなるかもしれません。また、最初の状態に応じてアニメーションを変えなければならないのに、最後の状態が同じであれば、まったく不格好になる可能性があります。

2. は void の状態で、一緒に :enter であり :leave エイリアス ( void ドキュメント , :leaveと:enterのドキュメント ) - DOM に追加または削除される要素をアニメーション化することができます。

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

   以前は、追加をアニメーション化するのは簡単でしたが、削除はもっと複雑で、アニメーションを起動し、終了まで待ち、その後でDOMから要素を削除する必要があり、すべてJSで行う必要がありましたので、これは非常にクールです。

3. プロパティの自動計算 '*' ( ドキュメント ) - 従来は困難だった、以下のようなアニメーションの実行を可能にします。 のような従来は困難であったアニメーションの実行を可能にします。 . この問題は、要素に固定の高さを設定するか（柔軟性に欠ける）、調整された遷移関数で最大高さを使用するか（完璧ではない）、JSで要素の高さを問い合わせる必要がありました（不要なリフローを引き起こす可能性があります）。しかし、Angularを使えばこれほど簡単なことはありません。

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

   そして、アニメーションは滑らかで "完全な" になっています。 実際の の高さが遷移に使用されるためです。

4. アニメーションのコールバック ( ドキュメンテーション ) - これは CSS アニメーションでは不可能だったことです (もしかしたら setTimeout でエミュレートできないとしても)、これはCSSアニメーションでは不可能なことで、例えばデバッグのために便利です。

5. 質問で述べたのとは異なり Angularのアニメーションでインスタンスフィールドをパラメータとして使用することは可能です。 を参照してください。 この質問 . 私はそれがはるかに簡単に使用することができますDOM APIを介してCSS変数を操作するよりも、次のとおりです。 この MDN で のように、DOM API を使って CSS 変数を操作するよりもはるかに簡単です。

上記のような機能が必要な場合、Angularはそのタスクのためのより良いツールになりえます。また、コンポーネント内で管理する多くのアニメーションがあるとき、これは私の個人的な意見ですが、私は、アニメーションをシートの中に持つよりも、Angularの方法で整理する方が簡単であると思います。