Angular의 CSS 애니메이션 이벤트

CSS 애니메이션은 Javascript를 사용하여 수신할 수 있는 이벤트를 생성합니다. Vanilla 프로젝트와 Angular 프로젝트 간에 이벤트 리스너를 연결하는 방법에는 약간의 차이가 있습니다. 사용 가능한 이벤트 목록부터 시작하겠습니다.

animationstart - 애니메이션이 시작될 때 발생함

animationend - 애니메이션이 완료되면 발생함

animationiteration - 애니메이션 반복이 종료되고 다른 애니메이션이 시작될 때 발생합니다. 이 이벤트는 n - 1 반복에 대해서만 발생합니다. 애니메이션의 마지막 반복은 대신 animationend 이벤트를 발생시킵니다.

Notice that the event names are all in lowercase and not camel-case

일반 사용법

이러한 이벤트를 수신하려면 addEventListener 를 사용하여 전환이 있는 요소에 이벤트 리스너를 연결해야 합니다. addEventListener는 애니메이션이나 전환에만 국한되지 않는 전역 이벤트 리스너입니다. 그런 다음 list of available events의 이벤트를 전달하여 그 중 하나를 들을 수 있습니다.

접근법 1: addEventListener 사용

일반 Javascript 접근 방식은 Angular 프로젝트에서 동일한 방식으로 작동합니다. 사용법의 유일한 차이점은 Angular가 대상 요소에 액세스하는 방법입니다. getViewById를 사용하여 대상 요소에 액세스하는 대신 Angular의 ViewChild 데코레이터를 사용할 수 있습니다.

<!-- src/app/app.component.html -->

<div #targetElement></div>

// src/app/app.component.ts

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  @ViewChild('targetElement') targetElement: targetElement;
}

대상 요소에 대한 참조를 가져온 후 addEventListener 함수를 사용하여 이벤트 수신기를 연결할 수 있습니다.

// src/app/app.component.ts

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  @ViewChild('targetElement') targetElement: ElementRef;

 ngAfterViewInit(): void {
    this.listenToAnimationStart();
    this.listenToAnimationEnd();
    this.listenToAnimationIteration();
  }

  ngOnDestroy(): void {
     this.targetElement.nativeElement.removeEventListener('animationstart');
     this.targetElement.nativeElement.removeEventListener('animationend');
     this.targetElement.nativeElement.removeEventListener('animationiteration');
  }

  listenToAnimationStart(): void {
     this.targetElement.nativeElement.addEventListener('animationstart', () => {
        console.log('animation started');
     })
  }

  listenToAnimationEnd(): void {
     this.targetElement.nativeElement.addEventListener('animationend', () => {
        console.log('animation ended');
     })
  }

  listenToAnimationIteration(): void {
     this.targetElement.nativeElement.addEventListener('animationiteration', () => {
        console.log('animation iteration');
     })
  }
}

이 접근 방식을 사용하면 메모리 누수를 방지하기 위해 구성 요소가 소멸된 후 이벤트 리스너를 정리해야 합니다(위 코드의 ngOnDestroy 참조).

접근 방식 2: Angular의 이벤트 리스너 사용

Angular는 템플릿에서 이러한 유형의 이벤트를 직접 처리할 수도 있습니다. 이렇게 하면 우리가 수행해야 하는 상용구 및 수동 정리의 양이 줄어듭니다.

이전 접근 방식에서 이벤트 리스너를 변환해 보겠습니다. 요소에 id를 부여하는 대신 괄호로 묶인 이벤트 이름을 직접 추가하고 이벤트가 발생할 때 호출될 함수에 바인딩합니다.

<!-- src/app/app.component.html -->
<div
  (animationstart)="onAnimationStart()"
  (animationend)="onAnimationEnd()"
  (animationiteration)="onAnimationInteration()"
></div>

구성 요소 파일에서 onAnimationStart , onAnimationEnd 및 onAnimationInteration 함수를 추가합니다.

// src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {

  onAnimationStart(): void {
      console.log('animation started');
  }

  onAnimationEnd(): void {
     console.log('animation ended');
  }

  onAnimationInteration(): void {
    console.log('animation iteration');
  }
}

마무리

두 접근 방식 모두 장단점이 있습니다. 첫 번째 접근 방식( addEventListener )이 더 장황하지만 이벤트 리스너 작동 방식을 구성하는 옵션을 전달하여 몇 가지 추가 기능을 제공합니다. 리스너가 활성화될 때 단계를 더 많이 제어할 수 있습니다. 이것은 rxjs observables와 결합되어 여러 이벤트 소스를 결합해야 하는 경우 훨씬 더 많은 제어를 제공합니다.

이와 같은 더 많은 콘텐츠에 관심이 있거나 질문이 있는 경우 의견에 알려주거나 다음 주소로 트윗하십시오.