Angular Animation condition 앵귤러 애니메이션 조건 예시

import {
  animate,
  keyframes,
  query,
  stagger,
  state,
  style,
  transition,
  trigger,
} from '@angular/animations'; // 필요한 모듈 로드

export const fadeIn = trigger('fadeIn', [ // 이름 설정
  transition('inactive => active', [ // 비활성->활성 상태로 변경 시
    animate(
      '2s cubic-bezier(0.250, 0.460, 0.450, 0.940)',
      keyframes([
        style({
          transform: 'translateX(-50px)',
          opacity: '0',
          offset: 0,
        }),
        style({
          transform: 'translateX(0)',
          opacity: '1',
          offset: 1.0,
        }),
      ])
    ),
  ]),
  transition('active => inactive', [ // 활성->비활성 상태로 변경 시
    animate(
      '0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530)',
      keyframes([
        style({
          transform: 'translateX(0)',
          opacity: '1',
          offset: 0,
        }),
        style({
          transform: 'translateX(-50px)',
          opacity: '0',
          offset: 1.0,
        }),
      ])
    ),
  ]),
]);

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

- `* => *`: 어떤 상태에서든 다른 상태로의 모든 변환을 의미합니다. 이 유형은 가장 일반적으로 사용됩니다.
- `void => *`: 초기 상태에서 어떤 상태로의 변환을 의미합니다. `void`는 컴포넌트에 해당하지 않는 초기 상태를 나타냅니다.
- `* => void`: 어떤 상태에서 `void` 상태로의 변환을 의미합니다. 주로 요소가 사라지는 효과를 나타내는 데 사용됩니다.

이 외에도 상태 변환 유형은 다양하며, 애플리케이션에 따라 유연하게 조정할 수 있습니다. 적절한 상태 변환 유형을 선택하여 애니메이션을 원하는 상황에 맞게 트리거할 수 있습니다.

 

 <div
      [@introLeftAnimation]="조건 ? 'active' : 'inactive'"
    >
    안녕하세요?
 </div>

2. 3항 연산자를 사용해서 활성 / 비활성 상태를 결정합니다.