Angular: Motionを使ったアニメーション

DRANK

Motionというアニメーションライブラリがある。Figma Makeでコード生成させるとアニメーション用に使われているのを見かけて調べてみたら、React用、Vue.js用と別にJavaScript用のパッケージがあることに気づいた。 v21.0とMotion v12.23.25 で動作するサンプル。基本的な使い方Motionの基本的な使い方では、animate() 関数の第一引数にアニメーションさせたいDOM要素を渡し、アニメーションの詳細を第二引数以降に渡す。例として、次のようなテンプレートで、#fadeBox変数でアクセスできるようにしたapp-animated-boxコンポーネントを用意する。このコンポーネントはただの矩形を表示するコンポーネントだ。ボタンがクリックされたらrunFadeAnimationメソッドを呼び出してfadeBoxコンポーネントのDOM要素をアニメーションさせる。 <section class="bg-white p-6 rounded-lg shadow-md"> <h2 class="text-xl font-semibold mb-4 text-gray-700">Fade In Animation</h2> <app-animated-box #fadeBox> Fade </app-animated-box> <button (click)="runFadeAnimation(fadeBox)" class="btn-base">Animate</button> </section> コンポーネントクラス側の実装はこうなる。run…