Yeniden kullanılabilir animasyonlar

IMPORTANT: @angular/animations paketi artik kullanim disidir (deprecated). Angular ekibi, tum yeni kodlar icin animasyonlarda animate.enter ve animate.leave ile yerel CSS kullanmanizi onerir. Yeni giris ve cikis animasyon rehberinde daha fazla bilgi edinin. Ayrica uygulamalarinizda saf CSS animasyonlarina nasil gecis yapabileceginizi ogrenmek icin Angular'in Animasyon paketinden gecis belgesine bakin.

Bu konu, yeniden kullanilabilir animasyonlarin nasil olusturulacagina dair ornekler saglar.

Yeniden kullanılabilir animasyonlar oluşturma

Yeniden kullanilabilir bir animasyon olusturmak icin, animation() fonksiyonunu kullanarak ayri bir .ts dosyasinda bir animasyon tanimlayin ve bu animasyon tanimini bir const dis aktarim degiskeni olarak bildirin. Daha sonra bu animasyonu useAnimation() fonksiyonunu kullanarak uygulamanizin bilesenlerinde iceri aktarabilir ve yeniden kullanabilirsiniz.

animations.ts

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

export const transitionAnimation = animation([
  style({
    height: '{{ height }}',
    opacity: '{{ opacity }}',
    backgroundColor: '{{ backgroundColor }}',
  }),
  animate('{{ time }}'),
]);

Onceki kod parcasinda, transitionAnimation bir dis aktarim degiskeni olarak bildirilerek yeniden kullanilabilir hale getirilmistir.

HELPFUL: height, opacity, backgroundColor ve time girisleri calisma zamaninda degistirilir.

Ayrica bir animasyonun bir bolumunu de dis aktarabilirsiniz. Ornegin, asagidaki kod parcasi animasyon trigger'ini dis aktarir.

animations.1.ts

import {animation, style, animate, trigger, transition, useAnimation} from '@angular/animations';
export const triggerAnimation = trigger('openClose', [
  transition('open => closed', [
    useAnimation(transitionAnimation, {
      params: {
        height: 0,
        opacity: 1,
        backgroundColor: 'red',
        time: '1s',
      },
    }),
  ]),
]);

Bu noktadan itibaren, yeniden kullanilabilir animasyon degiskenlerini bilesen sinifiniza iceri aktarabilirsiniz. Ornegin, asagidaki kod parcasi transitionAnimation degiskenini iceri aktarir ve useAnimation() fonksiyonu araciligiyla kullanir.

open-close.ts

import {Component, input} from '@angular/core';
import {transition, trigger, useAnimation, AnimationEvent} from '@angular/animations';
import {transitionAnimation} from './animations';

@Component({
  selector: 'app-open-close-reusable',
  animations: [
    trigger('openClose', [
      transition('open => closed', [
        useAnimation(transitionAnimation, {
          params: {
            height: 0,
            opacity: 1,
            backgroundColor: 'red',
            time: '1s',
          },
        }),
      ]),
    ]),
  ],
  templateUrl: 'open-close.html',
  styleUrls: ['open-close.css'],
})

Angular animasyonları hakkında daha fazla bilgi

Asagidakilerle de ilgilenebilirsiniz: