[javascript] 앵귤러의 애니메이션과 트랜지션 효과

05 Dec 2023

javascript

애니메이션과 트랜지션은 웹 애플리케이션에서 사용자 경험을 향상시키는 데 중요한 역할을 합니다. 앵귤러는 자체적으로 애니메이션과 트랜지션을 지원하며, 개발자는 이를 활용하여 웹 앱에 다양한 효과를 구현할 수 있습니다.

애니메이션

앵귤러에서 애니메이션을 사용하기 위해선 @angular/animations 모듈을 먼저 임포트해야 합니다. 이 모듈을 사용하면 애니메이션을 정의하고 적용할 수 있습니다.

아래는 앵귤러에서 애니메이션을 사용하는 예시입니다.

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

@Component({
  selector: 'app-animation-example',
  templateUrl: './animation-example.component.html',
  styleUrls: ['./animation-example.component.css'],
  animations: [
    trigger('fadeInOut', [
      state('in', style({ opacity: 1 })),
      transition(':enter', [
        style({ opacity: 0 }),
        animate(500)
      ]),
      transition(':leave',
        animate(500, style({ opacity: 0 }))
      )
    ])
  ]
})
export class AnimationExampleComponent implements OnInit {
  isVisible = false;

  toggleVisibility() {
    this.isVisible = !this.isVisible;
  }

  ngOnInit(): void {
  }
}

위의 코드는 @angular/animations 모듈을 사용해서 fadeInOut라는 애니메이션을 정의하였습니다. :enter와 :leave를 이용하여 엘리먼트가 나타날 때와 사라질 때에 대한 애니메이션을 설정할 수 있습니다.

트랜지션

트랜지션은 앵귤러에서 요소의 상태 변화를 부드럽게 처리할 때 사용됩니다. 애니메이션과 마찬가지로 @angular/animations 모듈을 사용하여 트랜지션을 정의할 수 있습니다.

아래는 앵귤러에서 트랜지션을 사용하는 예시입니다.

import { Component } from '@angular/core';
import { transition, trigger, useAnimation } from '@angular/animations';
import { fadeIn, fadeOut } from 'ng-animate';

@Component({
  selector: 'app-transition-example',
  templateUrl: './transition-example.component.html',
  styleUrls: ['./transition-example.component.css'],
  animations: [
    trigger('fade', [
      transition(':enter', useAnimation(fadeIn)),
      transition(':leave', useAnimation(fadeOut))
    ])
  ]
})
export class TransitionExampleComponent {
  isVisible = false;

  toggleVisibility() {
    this.isVisible = !this.isVisible;
  }
}

위의 코드는 ng-animate 라이브러리의 fadeIn과 fadeOut 효과를 사용하여 트랜지션을 설정한 예시입니다. :enter와 :leave를 사용하여 요소의 나타남과 사라짐에 대한 효과를 부드럽게 적용할 수 있습니다.

결론

앵귤러에서는 @angular/animations 모듈을 통해 애니메이션과 트랜지션을 간편하게 구현할 수 있습니다. 애니메이션과 트랜지션을 활용하면 웹 애플리케이션에 동적이고 생동감 있는 효과를 추가할 수 있으며, 사용자 경험을 향상시킬 수 있습니다.

더 많은 자세한 내용은 앵귤러 공식 문서를 참고해주세요.