Angular Animations menggunakan @angular/animations untuk animasi deklaratif.

Setup

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

@Component({
  animations: [
    trigger("fadeInOut", [
      state("void", style({ opacity: 0 })),
      transition(":enter", [animate("300ms ease-in")]),
      transition(":leave", [animate("300ms ease-out")]),
    ]),
  ],
  template: `
    @if (show) {
      <div @fadeInOut>Konten animasi</div>
    }
  `,
})

Konsep

• trigger — nama animasi
• state — gaya pada kondisi tertentu
• transition — perpindahan antar state
• animate — durasi dan easing