Yeniden kullanılabilir animasyonlar

IMPORTANT: @angular/animations paketi artık kullanım dışıdır (deprecated). Angular ekibi, tüm yeni kodlar için animasyonlarda animate.enter ve animate.leave ile yerel CSS kullanmanızı önerir. Yeni giriş ve çıkış animasyon rehberinde daha fazla bilgi edinin. Ayrıca uygulamalarınızda saf CSS animasyonlarına nasıl geçiş yapabileceğinizi öğrenmek için Angular'ın Animasyon paketinden geçiş belgesine bakın.

Bu konu, yeniden kullanılabilir animasyonların nasıl oluşturulacağına dair örnekler sağlar.

Yeniden kullanılabilir animasyonlar oluşturma

Yeniden kullanılabilir bir animasyon oluşturmak için, animation() fonksiyonunu kullanarak ayrı bir .ts dosyasında bir animasyon tanımlayın ve bu animasyon tanımını bir const dış aktarım değişkeni olarak bildirin. Daha sonra bu animasyonu useAnimation() fonksiyonunu kullanarak uygulamanızın bileşenlerinde içeri 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 }}'),
]);

Önceki kod parçasında, transitionAnimation bir dış aktarım değişkeni olarak bildirilerek yeniden kullanılabilir hale getirilmiştir.

HELPFUL: height, opacity, backgroundColor ve time girişleri çalışma zamanında değiştirilir.

Ayrıca bir animasyonun bir bölümünü de dış aktarabilirsiniz. Örneğin, aşağıdaki kod parçası animasyon trigger'ını dış aktarır.

animations.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 kullanılabilir animasyon değişkenlerini bileşen sınıfınıza içeri aktarabilirsiniz. Örneğin, aşağıdaki kod parçası transitionAnimation değişkenini içeri aktarır ve useAnimation() fonksiyonu aracılığıyla kullanır.

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

Aşağıdakilerle de ilgilenebilirsiniz: