Angular のtrigger 関数でアニメーションを実装する方法

Angular のtrigger 関数でアニメーションを実装する方法

trrigerをインポートしてアニメーションを実装しますが、app.module.tsファイルにBrowserAnimationsModuleをインポートする必要があります。

app.module.ts

参考サイト

ではappディレクトリ直下にtriggerの配列を定義したtsファイルを作成します。

triggerの第一引数(ここではkeywords)をテンプレート(ビュー)で@keywordsとして関連付けします。第二引数で配列を指定し、その中身はstateやtransitionとなります。

state関数の第一引数で関連付けの文字列を指定し、第二引数でアニメーションの状態を設定します。

transition関数はここでは、openとcloseの双方向の状態遷移について定義しています。

  • open => close // openからcloseに遷移
  • open <= close // closeからopenに遷移
  • open <=> close // openとcloseの双方向の遷移

以下では3.0s(3000msでも可)かけてease-in-outします。

app.animation.ts

triggerを定義した配列をルートコンポーネントに設定するためにapp.component.tsファイルを修正します。

ここでは変数名はstatとし、テンプレート(ビュー)で使用します。stat変数に設定した文字列と、state関数の第一引数が関連付けられます。

app.component.ts

最後にテンプレート(ビュー)で実際にアニメーションを実装します。

triggerの第一引数を、[@xxx]として記述します。これに=変数名として完成です。

app.component.html

これでアニメーションを実行してみます。表示・非表示が3秒かけて切り替わるのが確認できます。

Angular のtrigger 関数でアニメーションを実装する方法

参考サイト

CSS

opacityは0.0~1.0までが指定できます。0.0が透明、1.0が不透明です。

pointer-eventsはnoneにすると、クリックなどのタッチを無効にします。

opacityで透明にしても、pointer-eventsがautoだと、リンクが透明なのに有効になるので、opacityと連動させています。

pointer-events

Animation callback

アニメーションにはstartとdoneというコールバック関数があらかじめ用意されています。

startはアニメーションを開始時に実行され、doneはアニメーションが完了したら実行されます。

以下のように記述します。

以下のように記述すると実行されます。

app.component.html

実行結果です。

Angular のtrigger 関数でアニメーションを実装する方法

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA