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

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

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

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

app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
・
・
・
imports: [
  BrowserModule,
  BrowserAnimationsModule, // この行を追加
  FormsModule
],

参考サイト

では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

import {trigger, state, transition, animate, style} from '@angular/animations';
export const animation_triggers = [
  trigger('keywords', [
    state('close', style({opacity:0, pointer-events:'none'})),
    state('open', style({opacity:1,pointer-events:'auto'})),
    transition('open <=> close', animate('3.0s ease-in-out'))
  ])
];

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

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

app.component.ts

import { Component } from '@angular/core';
import { animation_triggers } from './app.animation';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [animation_triggers] // この行を追加
})
export class AppComponent {
  stat:string = 'close'; // 変数名はテンプレートと関連付ける、デフォルトは非表示にしておく
  onXXX() {
    this.stat = 'close'; // state関数のcloseアニメーションを実行する
  }
  onYYY() {
    this.stat = 'open'; // state関数のopenアニメーションを実行する
  }
}

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

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

[@xxx]='stat'

app.component.html

<div style='text-align:center'>
  <button (click)='onYYY()'>表示ボタン</button>
  <button (click)='onXXX()'>非表示ボタン</button><br>
</div>
<div [@keywords]='stat'> <!-- stat変数を使用する -->
  <p>testtest</p>
  <h2>Here are some links to help you start: </h2>
  <ul>
    <li>
      <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
    </li>
    <li>
      <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
    </li>
    <li>
      <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
    </li>
  </ul>
</div>

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

参考サイト

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はアニメーションが完了したら実行されます。

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

(@keywords.start)='onAAA()'
(@keywords.done)='onBBB()'

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

app.component.html

<div style='text-align:center'>
  <button (click)='onYYY()'>表示ボタン</button>
  <button (click)='onXXX()'>非表示ボタン</button><br>
</div>
<div [@keywords]='stat' (@keywords.start)='onAAA()' (@keywords.done)='onBBB()'> <!-- ここ -->
  <p>testtest</p>
  <h2>Here are some links to help you start: </h2>
  <ul>
    <li>
      <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
    </li>
    <li>
      <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
    </li>
    <li>
      <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
    </li>
  </ul>
</div>

実行結果です。