transition() メソッドのオプションを使用する方法

2024-04-02

Angular、TypeScript、Angular Animationsにおけるエラー「Found the synthetic property @panelState. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.」の解説

Found the synthetic property @panelState. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.

原因:

このエラーは、Angular Animations モジュールを使用しているときに発生します。@panelState プロパティは、BrowserAnimationsModule または NoopAnimationsModule モジュールがアプリケーションにインポートされていない場合、合成プロパティとして認識されます。

解決策:

このエラーを解決するには、以下の2つの方法があります。

BrowserAnimationsModule モジュールは、Angular Animations モジュールに必要なアニメーション機能を提供します。このモジュールをアプリケーションにインポートするには、以下のコードを app.module.ts ファイルに追加します。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NoopAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

どちらのモジュールを選択するべきか:

アプリケーションで実際にアニメーションを使用する場合は、BrowserAnimationsModule モジュールを選択する必要があります。
アプリケーションでアニメーションを使用しない場合は、NoopAnimationsModule モジュールを選択することで、アプリケーションのサイズを小さくすることができます。

補足:

@panelState プロパティは、@angular/material モジュールの MatExpansionPanel コンポーネントで使用されます。

Angular Animations サンプルコード

app.component.html:

<button (click)="panelState = 'expanded'">開く</button>
<button (click)="panelState = 'collapsed'">閉じる</button>

<div [@panelState]="panelState">
  パネルの内容
</div>

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('panelState', [
      state('expanded', style({
        height: '200px',
        opacity: 1
      })),
      state('collapsed', style({
        height: '0px',
        opacity: 0
      })),
      transition('expanded => collapsed', animate('200ms ease-in')),
      transition('collapsed => expanded', animate('200ms ease-out'))
    ])
  ]
})
export class AppComponent {
  panelState = 'collapsed';

  constructor() { }

  ngOnInit() {
  }
}

このコードを実行すると、ボタンをクリックしてパネルを開閉するアニメーションが表示されます。

ポイント:

@panelState プロパティは、パネルの状態を表すバインド変数です。
trigger() デコレータは、アニメーショントリガーを定義します。
state() メソッドは、アニメーションの状態を定義します。

Angular Animations でパネルの開閉アニメーションを作成する他の方法

@keyframes を使用して、アニメーションのタイミングと速度をより細かく制御することができます。

@keyframes panelOpen {
  0% {
    height: 0px;
    opacity: 0;
  }
  100% {
    height: 200px;
    opacity: 1;
  }
}

@keyframes panelClose {
  0% {
    height: 200px;
    opacity: 1;
  }
  100% {
    height: 0px;
    opacity: 0;
  }
}

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('panelState', [
      state('expanded', style({
        height: '200px',
        opacity: 1
      })),
      state('collapsed', style({
        height: '0px',
        opacity: 0
      })),
      transition('expanded => collapsed', animate('200ms ease-in', keyframes('panelClose'))),
      transition('collapsed => expanded', animate('200ms ease-out', keyframes('panelOpen')))
    ])
  ]
})
export class AppComponent {
  panelState = 'collapsed';

  constructor() { }

  ngOnInit() {
  }
}

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('panelState', [
      state('expanded', style({
        height: '200px',
        opacity: 1
      })),
      state('collapsed', style({
        height: '0px',
        opacity: 0
      })),
      transition('expanded => collapsed', animate('200ms ease-in')),
      transition('collapsed => expanded', animate('200ms ease-out'))
    ])
  ]
})
export class AppComponent {
  panelState = 'collapsed';

  constructor() { }

  ngOnInit() {
  }
}