Angular animatsiyalar

Angular animatsiyalari deklarativdir: komponentda trigger / transition / animate ni aniqlang va ma’lumotlardan holatini almashtiring; provideAnimations() bilan ilova bo‘ylab yoqing.

Muhim animatsiyalar

trigger: Shablonga biriktirilgan nomli animatsiyani aniqlang (masalan, [@openClose]).
o‘tish: Qachon ishlayotganini e’lon qiling (holat o‘zgarishi yoki * <=> * kabi joker belgilar).
jonlantirish: style() orqali davomiylik/engillashtirish va yakuniy uslublarni o‘rnating.

Sozlash; o‘rnatish:

O‘rnatish: npm install @angular/animations
Yoqish: @angular/platform-browser/animations dan provideAnimations() ilovasi bo‘ylab animatsiyalarni taqdim eting.
O‘chirish: harakatni o‘chirish uchun provideNoopAnimations() dan foydalaning (masalan, testlarda).

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

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

Misol tushuntirildi

trigger('openClose'): [@openClose] bilan shablonda ishlatiladigan nomli animatsiyani belgilaydi.
state(): Har bir holat uchun yakuniy uslublarni e’lon qiladi (masalan, open va closed ).
o‘tish('ochiq <=> yopiq'): Holatlar o‘rtasida almashinishda ishlaydi; animate('200ms ease-in-out') davomiylik/engillashtirishni belgilaydi.

Eslatmalar:

Aloqador: componentlar va shablonlarga qarang.
Komponentda animatsiyalarni deklarativ holda saqlang va holat orqali almashtiring.

component animatsiyalari

Komponentda triggerlarni aniqlang.

Shablonlarni sodda saqlash uchun ma’lumotlar orqali holatni o‘zgartiring.

<div [@openClose]="open ? 'open' : 'closed'">...</div>
toggle() { this.open = !this.open; }

Misol

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { trigger, state, style, transition, 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()] });

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

[@openClose]: Elementni openClose triggeriga bog‘laydi va component holatini 'open' yoki 'closed' sifatida ishlatadi.
O‘tish: tugmani bosish open <=> closed o‘tishni ishga tushirish uchun open ni aylantiradi.
provideAnimations(): O‘tishlarni bajarish uchun dastur bo‘ylab Angular animatsiyalarni yoqadi.

Umumiylik: Yumshoqroq harakat qilish uchun opacity / transform animatsiyasidan foydalaning; tartib xususiyatlari (masalan, kenglik/balandlik) qimmatroq bo‘lishi mumkin.

Holatga asoslangan: animatsiyalarni deklarativ holda saqlang va component holatiga qarab boshqariladi.

Imperativ DOM chaqiruvlaridan saqlaning.

Mavjudlik: Agar kerak bo‘lsa, qisqaroq yoki o‘chirilgan animatsiyalar bilan prefers-reduced-motion ni hurmat qiling.

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

// Reusable animation definition
export const fadeIn = animation([
  style({ opacity: 0 }),
  animate('{{time}} ease-out', style({ opacity: 1 }))
]);

// In component trigger:
// transition(':enter', [ useAnimation(fadeIn, { params: { time: '200ms' } }) ])

Animatsiyalarni taqdim etish

Ilovada animatsiyalarni yoqish uchun provideAnimations() dan foydalaning.

Sinovlarda yoki harakatni o‘chirishni xohlaganingizda provideNoopAnimations() dan foydalaning.

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

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

Eslatmalar:

Sinov: provideNoopAnimations() yordamida barqaror vaqtni aniqlash uchun testlarda animatsiyalarni o‘chirib qo‘ying.
Shartli yoqish: kam quvvatli qurilmalarda og‘ir animatsiyalarni belgilang yoki o‘chiring.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish