انیمیشن ها (Animations)

انیمیشن (Animation) یعنی حرکتِ نرمِ عناصر. در انگولار، تعریف ها «اعلانی» است. بنابراین با trigger و transition و animate در خود کامپوننت می نویسی. سپس با داده، حالت را عوض می کنی. برای کل برنامه، provideAnimations() را فعال کن.

مبانی انیمیشن ها

trigger نام انیمیشن است. در قالب با [@name] می بندی. transition می گوید چه زمانی اجرا شود. مثل تغییر حالت یا الگوی * <=> *. سپس animate زمان و شتاب را تعیین می کند و با style() به استایل نهایی می رسد.

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

@Component({
  animations: [
    trigger('openClose', [
      state('open', style({ opacity: 1 })),
      state('closed', style({ opacity: 0 })),
      transition('open <=> closed', [
        animate('200ms ease-in-out')
      ])
    ])
  ]
})
class App {}

مشاهده در ادیتور

انیمیشن در کامپوننت

تریگر را روی کامپوننت تعریف کن. سپس با یک متغیر ساده، حالت را عوض کن. این کار قالب را تمیز نگه می دارد.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { trigger } from '@angular/animations';
import { state } from '@angular/animations';
import { style } from '@angular/animations';
import { transition } from '@angular/animations';
import { animate } from '@angular/animations';
import { provideAnimations } from '@angular/platform-browser/animations';

@Component({
  selector: 'app-root',
  standalone: true,
  animations: [
    trigger('openClose', [
      state('open', style({ height: '80px', opacity: 1 })),
      state('closed', style({ height: '0px', opacity: 0 })),
      transition('open <=> closed', [
        animate('200ms ease-in-out')
      ])
    ])
  ],
  template: `
    <h3>Animations</h3>
    <button (click)=\"open = !open\">Toggle</button>
    <div [@openClose]=\"open ? 'open' : 'closed'\" style=\"overflow:hidden;background:#e3f2fd;margin-top:8px\">Panel</div>
  `
})
class App {
  open = true;
}

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

مشاهده در ادیتور

فعال سازی و غیرفعال سازی سراسری

برای فعال سازی برنامه وار از provideAnimations() استفاده کن. اگر در تست ها حرکت نمی خواهی، provideNoopAnimations() را بده.

import { provideAnimations } from '@angular/platform-browser/animations';
import { provideNoopAnimations } from '@angular/platform-browser/animations';
import { bootstrapApplication } from '@angular/platform-browser';

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

// Tests or opt-out
// bootstrapApplication(App, {
//   providers: [provideNoopAnimations()]
// });

مشاهده در ادیتور

نکات کارایی و دسترس پذیری

• روی opacity و transform انیمیت کن تا روان تر شود.
• خواص چیدمان مثل ارتفاع هزینه برتر هستند.
• ترجیح حرکت کم را رعایت کن (prefers-reduced-motion).

گام های عملی

1. پکیج انیمیشن را نصب و فعال کن.
2. یک trigger با حالت ها بساز.
3. در قالب با [@name] وصل شو و حالت را تغییر بده.

نکته: منطق تغییر حالت باید در داده باشد؛ نه در DOM دستوری.

جمع بندی سریع

• تعریف اعلانی: trigger و transition و animate.
• حالت را با داده عوض کن.
• provideAnimations را یک جا فعال کن.
• روی opacity/transform انیمیت کن.
• حرکت زیاد را قابل خاموشی کن.

مطالعه بیشتر: مدیریت وضعیت، تست انگولار، و کامپوننت ها.