Angular: 新しい Enter/Leave アニメーションAPIの解説

DRANK

Angular v20.2 では新しいアニメーションAPIが実験的にリリースされる予定だ。この機能は以前にRFCで提案されていたもので、その実装が形になってきた。 20.2.0-next.2 から使ってみることができるようになったので、この記事では使い方の概要を解説する。まだ安定版としてリリースされているわけではないので、不具合があるかもしれないし、今のAPIがそのまま正式にリリースされる保証もないことには留意してほしい。Live Example実際に動作するサンプルをStackblitzで作成した。ボタンをクリックするとメッセージが出たり消えたりして、その表示の切り替わりにアニメーションがついている。この実装のアニメーションに関わる部分をそれぞれ細かく見ていこう。animate.enterコンポーネントのテンプレート中で任意のHTML要素に animate.enter 属性を設定すると、その値の文字列が出現アニメーション用のCSSクラスとして付与される。次の例では、要素の出現時に enter クラスが付与される。このクラスはアニメーションが終了すると自動的に解除される。<div animate.enter="enter">Hello</div> あとはこの enter クラスに対応するCSSアニメーションを設定しておけば、要素がDO…