IMPORTANT: @angular/animationsパッケージは現在非推奨です。Angularチームは、新しく書くコードのアニメーションにはanimate.enterとanimate.leaveを使ったネイティブCSSの利用を推奨します。詳しくは、新しいenterとleaveのアニメーションガイドを参照してください。また、アプリケーションで純粋なCSSアニメーションへの移行を始める方法については、AngularのAnimationsパッケージからの移行も参照してください。
このトピックでは、再利用可能なアニメーションを作成する方法の例をいくつか紹介します。
再利用可能なアニメーションを作成する
再利用可能なアニメーションを作成するには、animation()関数を使って別の.tsファイルにアニメーションを定義し、そのアニメーション定義をconstのエクスポート変数として宣言します。
その後、useAnimation()関数を使って、このアニメーションをアプリケーション内の任意のコンポーネントにインポートして再利用できます。
animations.ts
import {animation, style, animate, trigger, transition, useAnimation} from '@angular/animations';export const transitionAnimation = animation([ style({ height: '{{ height }}', opacity: '{{ opacity }}', backgroundColor: '{{ backgroundColor }}', }), animate('{{ time }}'),]);前のコードスニペットでは、transitionAnimationをエクスポート変数として宣言することで再利用可能にしています。
HELPFUL: height、opacity、backgroundColor、timeの入力値は実行時に置き換えられます。
アニメーションの一部もエクスポートできます。
たとえば、次のスニペットではアニメーションのtriggerをエクスポートしています。
animations.1.ts
import {animation, style, animate, trigger, transition, useAnimation} from '@angular/animations';export const triggerAnimation = trigger('openClose', [ transition('open => closed', [ useAnimation(transitionAnimation, { params: { height: 0, opacity: 1, backgroundColor: 'red', time: '1s', }, }), ]),]);ここから先は、再利用可能なアニメーション変数をコンポーネントクラスにインポートできます。
たとえば、次のコードスニペットではtransitionAnimation変数をインポートし、useAnimation()関数を通して使用しています。
open-close.ts
import {Component, input} from '@angular/core';import {transition, trigger, useAnimation, AnimationEvent} from '@angular/animations';import {transitionAnimation} from './animations';@Component({ selector: 'app-open-close-reusable', animations: [ trigger('openClose', [ transition('open => closed', [ useAnimation(transitionAnimation, { params: { height: 0, opacity: 1, backgroundColor: 'red', time: '1s', }, }), ]), ]), ], templateUrl: 'open-close.html', styleUrls: ['open-close.css'],})Angularアニメーションについてさらに詳しく
以下の項目にも興味があるかもしれません：