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) 정의에서는 적용되지 않습니다. 따라서 변환은 입력 및 이탈시에 다릅니다. 엘리먼트는 왼쪽에서 들어오고 오른쪽으로 나갑니다.

이 두 가지 공통 애니메이션에는 고유 한 별칭이 있습니다. transition(':enter', [ ... ]); // void => * transition(':leave', [ ... ]); // * => 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)'}))     ])   ]) ]