angular-animations

@angular/animations

バージョン： Angular 21 (2025) タグ： アニメーション、UI、トランジション、モーション

参考資料： アニメーションガイド • API • npm

API の変更点

このセクションでは、最近のバージョン固有の API の変更について説明します。

• 新機能：モダンなアニメーション API — 非推奨の :enter/:leave の代わりに animateEnter と animateLeave を使用します

• 新機能：CSS ベースのアニメーション — パフォーマンス向上のため、Angular チームは CSS を推奨しています

• 新機能：View Transitions API — ブラウザーの View Transitions API をサポートします

• 非推奨：:enter と :leave — 代わりに animateEnter と animateLeave を使用します

ベストプラクティス

• アニメーションモジュールを有効にします

import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimations()
  ]
};

• 状態ベースのアニメーションにはトリガーを使用します

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

@Component({
  animations: [
    trigger('fadeInOut', [
      state('hidden', style({ opacity: 0 })),
      state('visible', style({ opacity: 1 })),
      transition('hidden <=> visible', animate(500))
    ])
  ]
})
export class FadeComponent {
  isVisible = signal(false);
}

• 入場／退場アニメーションを使用します

@Component({
  animations: [
    trigger('slideIn', [
      transition(':enter', [
        style({ transform: 'translateX(-100%)' }),
        animate('300ms ease-in', style({ transform: 'translateX(0%)' }))
      ]),
      transition(':leave', [
        animate('300ms ease-out', style({ transform: 'translateX(-100%)' }))
      ])
    ])
  ]
})
export class SlideComponent {}

• あらゆるトランジションにワイルドカード状態を使用します

trigger('expand', [
  transition('* => expanded', [
    style({ height: '*' }),
    animate('300ms ease-out', style({ height: '200px' }))
  ]),
  transition('expanded => *', [
    animate('300ms ease-in', style({ height: '*' }))
  ])
])

• リストアニメーションには query と stagger を使用します

trigger('listAnimation', [
  transition('* => *', [
    query(':enter', [
      style({ opacity: 0 }),
      stagger(100, [
        animate('300ms', style({ opacity: 1 }))
      ])
    ], { optional: true })
  ])
])

• アニメーションコールバックを使用します

@Component({
  template: `
    <div [@fade]="state" 
         (@fade.start)="onAnimationStart()"
         (@fade.done)="onAnimationDone()">
    </div>
  `
})
export class AnimComponent {
  onAnimationStart() { console.log('Start'); }
  onAnimationDone() { console.log('Done'); }
}

• 再利用可能なトリガーを使用します

// animations.ts
export const fadeAnimation = trigger('fade', [
  transition(':enter', [
    style({ opacity: 0 }),
    animate('300ms', style({ opacity: 1 }))
  ]),
  transition(':leave', [
    animate('300ms', style({ opacity: 0 }))
  ])
]);

• 関数型アニメーションを使用します（Angular 17 以降）

@Component({
  animations: [
    trigger('expanded', [
      transition(':expanded', [
        animate('300ms cubic-bezier(0.4, 0, 0.2, 1)')
      ])
    ])
  ]
})
export class ExpandComponent {}

• パフォーマンスを最適化します

// Prefer transform and opacity
transition('* => *', [
  animate('200ms', style({ 
    transform: 'translateX(10px)',
    opacity: 0.5 
  }))
])

// Avoid expensive properties
// ❌ Don't animate: width, height, margin, top
// ✅ Do animate: transform, opacity

• アクセシビリティのため、動きを抑えた表示を提供します

@Component({
  animations: [
    trigger('slide', [
      transition('* => *', [
        style({ '@.disabled': '' }), // Disable for reduced motion
        animate('300ms')
      ])
    ])
  ]
})