everything-claude-code/docs/ja-JP/skills/angular-developer/references/angular-animations.md

Angular アニメーション

Angularで要素をアニメーションさせる場合は、まず package.json でプロジェクトのAngularバージョンを確認してください。 モダンなアプリケーション（Angular v20.2以上）では、animate.enter と animate.leave を使ったネイティブCSSを優先してください。古いアプリケーションでは、非推奨の @angular/animations パッケージを使用する必要がある場合があります。

1. ネイティブCSSアニメーション（v20.2以上 推奨）

モダンなAngularは animate.enter と animate.leave を提供し、要素がDOMに追加・削除される際にアニメーションさせます。これらは適切なタイミングでCSSクラスを適用します。

animate.enter と animate.leave

要素に直接使用して、enter・leaveフェーズ中にCSSクラスを適用します。Angularはアニメーション完了時にenterクラスを自動的に削除します。animate.leave の場合、Angularはアニメーションが完了するまで要素をDOMから削除しません。

animate.enter の例：

@if (isShown()) {
<div class="enter-container" animate.enter="enter-animation">
  <p>The box is entering.</p>
</div>
}

/* トランジションを使用する場合は開始スタイルを定義してください */
.enter-container {
  border: 1px solid #dddddd;
  margin-top: 1em;
  padding: 20px;
  font-weight: bold;
  font-size: 20px;
}
.enter-container p {
  margin: 0;
}
.enter-animation {
  animation: slide-fade 1s;
}
@keyframes slide-fade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

注意: animate.leave は削除される子要素に追加できます。

イベントバインディングとサードパーティライブラリ

(animate.enter) と (animate.leave) にバインドして、関数を呼び出したりGSAPなどのJSライブラリを使用することができます。

@if(show()) {
<div (animate.leave)="onLeave($event)">...</div>
}

import { AnimationCallbackEvent } from '@angular/core';

onLeave(event: AnimationCallbackEvent) {
  // カスタムアニメーションロジックをここに記述
  // 重要: Angularが要素を削除できるよう、完了時に必ず animationComplete() を呼び出してください！
  event.animationComplete();
}

2. 高度なCSSアニメーション

CSSは高度なアニメーションシーケンスのための強力なツールを提供しています。

状態とスタイルのアニメーション

プロパティバインディングを使用して要素のCSSクラスを切り替え、トランジションをトリガーします。

<div [class.open]="isOpen">...</div>

div {
  transition: height 0.3s ease-out;
  height: 100px;
}
div.open {
  height: 200px;
}

Autoハイトのアニメーション

css-grid を使用してautoハイトへのアニメーションが可能です。

.container {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s;
}
.container.open {
  grid-template-rows: 1fr;
}
.container > div {
  overflow: hidden;
}

スタッガリングと並列アニメーション

• スタッガリング: リスト内のアイテムに異なる値の animation-delay または transition-delay を使用します。
• 並列: animation ショートハンドで複数のアニメーションを適用します（例：animation: rotate 3s, fade-in 2s;）。

プログラムによる制御

標準のWeb APIを使用してアニメーションを直接取得します：

const animations = element.getAnimations();
animations.forEach((anim) => anim.pause());

3. レガシーアニメーションDSL（非推奨）

古いプロジェクト（v20.2以前、または @angular/animations が既に大量に使用されているプロジェクト）では、コンポーネントメタデータDSLを使用します。

重要: レガシーアニメーションと animate.enter/leave を同じコンポーネント内で混在させないでください。

セットアップ

bootstrapApplication(App, {
  providers: [provideAnimationsAsync()],
});

トランジションの定義

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

@Component({
  animations: [
    trigger('openClose', [
      state('open', style({opacity: 1})),
      state('closed', style({opacity: 0})),
      transition('open <=> closed', [animate('0.5s')]),
    ]),
  ],
  template: `<div [@openClose]="isOpen() ? 'open' : 'closed'">...</div>`,
})
export class OpenClose {
  isOpen = signal(true);
}