Course Progress 100%

Angular Animations

← CSS Isolation & Encapsulation Angular Animations →

Angular Animations का मतलब है Angular application में UI transitions और visual effects को structured, controlled और maintainable तरीके से implement करना। Simple CSS animations के मुकाबले Angular animations state-based होती हैं और component logic के साथ tightly integrated रहती हैं।

इस chapter में हम Angular (modern Angular) animations को beginner से advanced level तक deep में समझेंगे, ताकि real-world applications में smooth और predictable animations बनाई जा सकें।

Angular Animations क्या हैं

Angular animations एक declarative animation system है, जिसमें animation को states और transitions के रूप में define किया जाता है।

Angular animations:

  • Component state के साथ bind होती हैं
  • DOM enter और leave events को handle करती हैं
  • Complex sequences को easily manage करती हैं
  • Change detection के साथ sync रहती हैं

Angular Animations के लिए Required Module

Angular animations use करने के लिए BrowserAnimationsModule enable करना जरूरी है।

Standalone Application में Enable करना

import { bootstrapApplication } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';

bootstrapApplication(AppComponent, {
  providers: [provideAnimations()]
});

अगर animations नहीं चाहिए और सिर्फ compatibility चाहिए, तो provideNoopAnimations() भी use किया जा सकता है।

Core Animation Building Blocks

Angular animations कुछ core functions पर based होती हैं:

  • trigger
  • state
  • style
  • transition
  • animate

इन सबको @angular/animations से import किया जाता है।

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

Basic Animation Example

सबसे पहले एक simple animation देखते हैं।

Component Code

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

@Component({
  selector: 'app-box',
  standalone: true,
  template: `
    <button (click)="toggle()">Toggle</button>
    <div [@boxAnimation]="state" class="box"></div>
  `,
  styles: [`
    .box {
      width: 100px;
      height: 100px;
      background: steelblue;
    }
  `],
  animations: [
    trigger('boxAnimation', [
      state('small', style({
        transform: 'scale(1)'
      })),
      state('large', style({
        transform: 'scale(1.5)'
      })),
      transition('small <=> large', animate('300ms ease-in-out'))
    ])
  ]
})
export class BoxComponent {
  state: 'small' | 'large' = 'small';

  toggle() {
    this.state = this.state === 'small' ? 'large' : 'small';
  }
}

यहां क्या हो रहा है

  • trigger animation का नाम define करता है
  • state अलग-अलग visual states define करता है
  • transition state change पर animation run करता है
  • animate duration और timing function define करता है

Animation Binding in Template

Animation को template में property binding के साथ attach किया जाता है।

<div [@boxAnimation]="state"></div>

यह binding animation को component state से connect करती है।

Enter और Leave Animations

Angular में elements के DOM में आने और जाने पर animations apply की जा सकती हैं।

यह खासतौर पर *ngIf, @if, *ngFor, @for के साथ useful होता है।

Enter / Leave Example

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

<div *ngIf="visible" @fade>
  Fade Content
</div>

Special States

  • :enter → element DOM में insert होता है
  • :leave → element DOM से remove होता है

Animations with Lists

List items animate करने के लिए *ngFor या @for के साथ animations use की जाती हैं।

animations: [
  trigger('listAnimation', [
    transition(':enter', [
      style({ transform: 'translateX(-20px)', opacity: 0 }),
      animate('200ms ease-out', style({ transform: 'translateX(0)', opacity: 1 }))
    ])
  ])
]

<li *ngFor="let item of items" @listAnimation>
  {{ item }}
</li>

हर new item smoothly animate होकर list में आता है।

Reusable Animations बनाना

Angular animations को reusable functions में extract किया जा सकता है।

import { animation, style, animate } from '@angular/animations';

export const fadeIn = animation([
  style({ opacity: 0 }),
  animate('300ms ease-in', style({ opacity: 1 }))
]);

फिर component में use किया जा सकता है।

useAnimation(fadeIn)

यह large projects में consistency बनाए रखने के लिए बहुत useful है।

Animation Timing और Easing

animate() में duration और easing define की जाती है।

animate('500ms cubic-bezier(0.35, 0, 0.25, 1)')

Common easing options:

  • ease
  • ease-in
  • ease-out
  • ease-in-out

Keyframes Animations

Complex animations के लिए keyframes use किए जाते हैं।

import { keyframes } from '@angular/animations';

animate('400ms', keyframes([
  style({ opacity: 0, transform: 'translateY(-10px)', offset: 0 }),
  style({ opacity: 1, transform: 'translateY(0)', offset: 1 })
]))

Keyframes से fine-grained control मिलता है।

Animation States vs CSS Animations

Difference समझना जरूरी है:

  • CSS animations → static, class-based
  • Angular animations → state-driven, logic-aware

Angular animations automatically DOM lifecycle के साथ sync रहती हैं।

Performance Considerations

Angular animations optimized होती हैं, लेकिन best practices follow करना जरूरी है:

  • transform और opacity properties prefer करें
  • Heavy animations avoid करें
  • Large lists पर animation carefully use करें
  • Unnecessary animations disable करें

Common Mistakes

  • BrowserAnimationsModule enable करना भूल जाना
  • हर UI element पर animation लगा देना
  • Complex logic animations में डाल देना
  • CSS और Angular animations को mix करना

Angular Animations का सही Use

Angular animations best suited हैं:

  • Page transitions
  • Modals और dialogs
  • Expand / collapse panels
  • Notifications और alerts
  • Dynamic lists

Angular Animations UI को सिर्फ सुंदर नहीं बनातीं, बल्कि user experience को meaningful और responsive बनाती हैं। सही जगह और सही level पर animations use करने से Angular applications professional और polished feel देती हैं।

← CSS Isolation & Encapsulation Angular Animations →
  • Home