Angular Animation 앵귤러 애니메이션 효과 넣는 법 예시

1. app.config.ts 

 

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import {
  provideRouter,
  withEnabledBlockingInitialNavigation,
  RouteReuseStrategy,
} from '@angular/router';
import { appRoutes } from './app.routes';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

// 애니메이션 쓰려면 추가
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(appRoutes, withEnabledBlockingInitialNavigation()),
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    importProvidersFrom(
      BrowserModule,
      IonicModule.forRoot(),
      BrowserAnimationsModule // 애니메이션
    ),
  ],
};

2. 애니메이션 효과를 넣기 위해 필요한 모듈을 로드합니다.

 

 

3. 프로젝트에 animation 을 저장할 폴더를 생성하고 fade 효과를 주기 위한 ts 파일도 생성합니다.

 

 

 

 

 

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

export const fadeAnimation = trigger('fadeAnimation', [
  transition(':enter', [
    style({
      opacity: 0
    }),
    animate('250ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({
      opacity: 1
    })),
  ]),
  transition(':leave', [
    style({
      opacity: 1
    }),
    animate('250ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({
      opacity: 0
    })),
  ]),
]);

앵귤러에서 transition 함수의 첫 번째 인자는 상태 변환의 유형을 지정하는 문자열입니다. 여기에는 다양한 유형이 있으며, 각각의 유형은 다른 상황에서 애니메이션을 트리거합니다. 일반적으로 사용되는 몇 가지 트랜지션 유형은 다음과 같습니다:

* => *: 어떤 상태에서든 다른 상태로의 모든 변환을 의미합니다. 이 유형은 가장 일반적으로 사용됩니다.
void => *: 초기 상태에서 어떤 상태로의 변환을 의미합니다. void는 컴포넌트에 해당하지 않는 초기 상태를 나타냅니다.
* => void: 어떤 상태에서 void 상태로의 변환을 의미합니다. 주로 요소가 사라지는 효과를 나타내는 데 사용됩니다.
이 외에도 상태 변환 유형은 다양하며, 애플리케이션에 따라 유연하게 조정할 수 있습니다. 적절한 상태 변환 유형을 선택하여 애니메이션을 원하는 상황에 맞게 트리거할 수 있습니다.

4. 애니메이션을 만들기 위해 앵귤러에서 제공하는 애니매이션 모듈을 로드

5. 애니메이션 이름과 스타일을 작성합니다.

 

 

 

 

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IconComponent } from '../icon/icon.component';
import { fadeAnimation } from '../../animations/fade.animation'; // 애니메이션

@Component({
  selector: 'client-mobile-menu',
  standalone: true,
  imports: [CommonModule, IconComponent],
  templateUrl: './mobile-menu.component.html',
  styleUrls: ['./mobile-menu.component.scss'],
  animations: [fadeAnimation], // 애니메이션
})
export class MobileMenuComponent {
  isOpen: boolean = false;
}

6. 애니메이션 효과를 적용할 컴포넌트

7. 방금 전에 작성한 애니메이션을 로드하고 @component 프로퍼티에도 명시합니다.

 

 

 

 

<div class="relative flex flex-col items-center justify-center w-full h-full">
  <app-icon
    src="assets\icon\menu.svg"
    class="text-white active:scale-105"
    alt="모바일 메뉴 아이콘"
    (click)="isOpen = !isOpen"
  />
  <div
    *ngIf="isOpen"
    @fadeAnimation
    class="absolute right-0 p-3 text-xs text-white rounded-md bg-white/5 top-7 min-w-max"
  >
    메뉴들
  </div>
</div>

8.  @fadeAnimation : 해당 애니메이션을 사용하려면 애니메이션 이름 앞에 @ 를 사용합니다.