Angular — Animations

Setup Animations

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

@Component({
  animations: [
    trigger('fade', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('300ms', style({ opacity: 1 }))
      ]),
      transition(':leave', [
        animate('300ms', style({ opacity: 0 }))
      ])
    ])
  ]
})

Basic Animations

animations: [
  trigger('slide', [
    state('in', style({ transform: 'translateX(0)' })),
    state('out', style({ transform: 'translateX(-100%)' })),
    transition('in => out', animate('300ms ease-out')),
    transition('out => in', animate('300ms ease-in'))
  ])
]

In Template

<div @fade *ngIf="show">Content</div>
<div [@slide]="state">Sliding content</div>

Route Animations

// app.component.ts
animations: [
  trigger('routeAnimation', [
    transition('* <=> *', [
      style({ opacity: 0 }),
      animate('0.3s', style({ opacity: 1 }))
    ])
  ])
]

Animation Callbacks

<div @fade 
     (@fade.start)="onStart($event)"
     (@fade.done)="onDone($event)">
  Content
</div>

Mini Practice

1. Create enter/leave animations
2. Add state transitions
3. Implement route animations
4. Use animation callbacks

Up Next

Continue with Guards — route guards.