10 애니메이션(Animation) 03
예 : 들어가기와 나가기
void 및 * 상태를 사용하면 엘리먼트의 들어가고 떠나는 애니메이션 효과를 정의 할 수 있습니다.
l 들어가기 : void => *
l 나가기 : * => void
예를 들어, 아래의 animations 배열에는 void => * 및 * => void 구문을 사용하여 뷰 안팎으로 엘리먼트에 애니메이션을 적용하는 두 가지 전환이 있습니다.
|
hero-list-enter-leave.component.ts (excerpt) |
|
animations: [ trigger('flyInOut', [ state('in', style({transform: 'translateX(0)'})), transition('void => *', [ style({transform: 'translateX(-100%)'}), animate(100) ]), transition('* => void', [ animate(100, style({transform: 'translateX(100%)'})) ]) ]) ] |
이 경우 스타일은 전환 정의에서 직접 void 상태에 적용되며 별도의 state (void) 정의에서는 적용되지 않습니다. 따라서 변환은 입력 및 이탈시에 다릅니다. 엘리먼트는 왼쪽에서 들어오고 오른쪽으로 나갑니다.
|
이 두 가지 공통 애니메이션에는 고유 한 별칭이 있습니다.
|
예 : 여러 상태에서 진입 및 진출하기
영웅 상태를 애니메이션 상태로 사용하여 이 애니메이션을 이전 상태 전환 애니메이션과 결합 할 수도 있습니다. 영웅의 상태에 따라 진입/진출을 위한 다양한 전환을 구성 할 수 있습니다.
l 비활성 영웅 진입 : void => inactive
l 활성 영웅 진입 : void => active
l 비활성 영웅 떠나기 : inactive => void
l 활성 영웅 떠나기 : active => void
이렇게하면 각 전환에 대해 세밀한 제어가 가능합니다.
|
hero-list-enter-leave.component.ts (excerpt) |
|
animations: [ trigger('heroState', [ state('inactive', style({transform: 'translateX(0) scale(1)'})), state('active', style({transform: 'translateX(0) scale(1.1)'})), transition('inactive => active', animate('100ms ease-in')), transition('active => inactive', animate('100ms ease-out')), transition('void => inactive', [ style({transform: 'translateX(-100%) scale(1)'}), animate(100) ]), transition('inactive => void', [ animate(100, style({transform: 'translateX(100%) scale(1)'})) ]), transition('void => active', [ style({transform: 'translateX(0) scale(0)'}), animate(200) ]), transition('active => void', [ animate(200, style({transform: 'translateX(0) scale(0)'})) ]) ]) ] |