angular-animations

Files (5)

• SKILL.md
• _INDEX.md · references/discussions/
• _INDEX.md · references/docs/
• _INDEX.md · references/issues/
• _INDEX.md · references/releases/

SKILL.md (first lines)

# @angular/animations

**Version:** Angular 21 (2025)
**Tags:** Animations, UI, Transitions, Motion

**References:** [Animations Guide](https://angular.dev/guide/animations) • [API](https://angular.dev/api/animations) • [npm](https://www.npmjs.com/package/@angular/animations)

## API Changes

This section documents recent version-specific API changes.

- NEW: Modern animation API — Use `animateEnter` and `animateLeave` over deprecated `:enter`/`:leave`

- NEW: CSS-based animations — Angular team recommends CSS for better performance

- NEW: View transitions API — Support for browser View Transitions API

- DEPRECATED: `:enter` and `:leave` — Use `animateEnter` and `animateLeave` instead

## Best Practices

- Enable animations module

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

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

- Use triggers for state-based animations

```ts
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);
}
```

- Use enter/leave animations

```ts
@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 {}
```

- Use wildcard states for any transition

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

- Use query and stagger for list animations

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

- Use animation callbacks

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

- Use reusable triggers

From oguzhan18/angular-ecosystem-skills, MIT.

More from oguzhan18/angular-ecosystem-skills