Animation Basics in Angular

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

@Component({
  selector: 'app-animated',
  template: \`
    <div [@slideIn]="isVisible" class="box">
      Animated Content
    </div>
    <button (click)="toggle()">Toggle</button>
  \`,
  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 AnimatedComponent {
  isVisible = true;
  toggle() { this.isVisible = !this.isVisible; }
}