할일 추가 애니메이션
먼저 애니메이션을 정의한다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@Component({ selector: 'app-todo', templateUrl: './todo.component.html', styleUrls: ['./todo.component.scss'], animations: [ trigger('flyInOut', [ state('in', style({opacity: 1, transform: 'translate(0, 0)'})), transition('void => in', [ style({opacity: 0, transform: 'translate(-100%, 0)'}), animate(300) ]), ]) ] }) |
먼저 모듈에 BrowserAnimationsModule이 없으면 추가한다.
trigger에 애니메이션 이름을 flyInOut으로 명명한다.
먼저 공통적으로 사용될 상태 정의를 한다. 이것은 클래스의 인스턴스 멤버와 비슷한 개념이다. 여기서는 in 상태에 대한 스타일을 불투명, 제자리 상태로 정의하였다.
transiion 문법은 transition(‘A => B’, [A상태, animate(시간, B상태)] 이다. 만일 상태가 생략되면 위에 정의된 상태가 사용된다.
void 상태는 아무것도 없는 상태를 의미한다.
애니메이션 적용하기
trigger로 정의한 애니메이션을 적용하기 위해서는 애니메이션을 적용할 Node를 먼저 정의한다.
할일 추가를 하면 table tr 컬럼이 없다가 생기므로 tr 노드에 애니메이션을 적용한다.
|
1 |
<tr *ngIf="!todo.isEdited" [@flyInOut] = "'in'"> |
삭제 애니메이션
제대로 되면 삭제 애니메이션을 해보자.오른쪽으로 사라지게 해보자. 위의 코드를 이해를 했다면 충분히 할것이다.
|
1 2 3 |
transition('in => void', [ animate(300, style({opacity: '0', transform: 'translate(100%, 0)'})) ]) |
이번에는 프레임애니메이션을 정의해서 애니메이션을 해본다.
|
1 2 3 4 5 6 7 8 9 |
transition('in => void', [ // animate(300, style({opacity: '0', transform: 'translate(100%, 0)'})) // multi frame transition animate(300, keyframes([ style({opacity: 1, transform: 'translateX(0)', offset: 0}), style({opacity: 1, transform: 'translateX(-50px)', offset: 0.7}), style({opacity: 0, transform: 'translateX(100%)', offset: 1.0}) ])) ]) |
keyframes 배열에 각각의 스타일과 0~1 사이의 값으로 애니메이션을 정의한다.
router 애니메이션 구현
animations 폴더를 추가하고 router-animation.ts 화일을 추가한다.
group은 동시 실행을 막고 하나씩 차례대로 실행하도록 한다. 나타날때는 왼쪽 -100%에서 사라질때는 아래로 100%로 사라진다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
export const routeAnimation = trigger('routeAnimation', [ transition('* <=> *', [ /* order */ /* 1 */ query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }), /* 2 */ group([ // block executes in parallel query(':enter', [ style({ transform: 'translateX(-100%)' }), animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' })) ], { optional: true }), query(':leave', [ style({ transform: 'translate(0, 0)' }), animate('0.5s ease-in-out', style({ transform: 'translate(0, 100%)' })) ], { optional: true }), ]) ]) ]); |
router-outlet 이 있는 부분을 설정한다.
app.component.ts에 좀점에 만든 routeAnimation을 추가하고, getState() 메서드를 추가한다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], animations: [routeAnimation] }) export class AppComponent { title = 'app'; public config: ToasterConfig = new ToasterConfig({ showCloseButton: true, tapToDismiss: false, timeout: 2000 }); constructor(public authService: AuthGuardService) {} getState(outlet: any) { return outlet.activatedRouteData['state'] || 'home'; } } |
app.component.htm에 router-out을 아래와 같이 수정한다.
|
1 2 3 |
<div class="container p-3" [@routeAnimation]="getState(o)"> <router-outlet #o="outlet"></router-outlet> </div> |
router-outlet 부분의 activatedRouteData 의 state 상태를 라우팅 테이블에 추가한다.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const routes: Routes = [ {path: '', component: HomeComponent, data: {state: 'home'} }, {path: 'heroes', component: HeroesComponent, data: {state: 'heroes'}, children: [ {path: 'detail/:hero_id', component: HeroDetailComponent} ]}, {path: 'jquery', component: JqueryComponent, data: {state: 'jquery'} }, {path: 'todo', component: TodoComponent, data: {state: 'todo'} }, {path: 'login', component: LoginComponent, data: {state: 'login'}}, { path: 'admin', loadChildren: './admin/admin.module#AdminModule', canLoad: [AuthGuardService] }, ]; |
애니메이션을 하기위해 position을 fixed로 추가하면서 가로넓이가 순간적으로 넓어지는 현상이 나타난다.
이부분을 수정해보자.
|
1 2 3 4 5 6 7 8 |
:host { div.container { position: relative; padding: 0; } } |
패딩 부분을 수정
|
1 2 3 |
<div class="container pt-3" [@routeAnimation]="getState(o)"> <router-outlet #o="outlet"></router-outlet> </div> |
position을 absolute로 수정한다.
나타나고 사라질때 opacity 항목도 추가한다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
transition('* <=> *', [ /* order */ /* 1 */ query(':enter, :leave', style({ position: 'absolute', width: '100%' }), { optional: true }), /* 2 */ group([ // block executes in parallel query(':enter', [ style({ transform: 'translateX(-100%)', opacity: 0 }), animate('0.5s ease-in-out', style({ transform: 'translateX(0%)', opacity: 1 })) ], { optional: true }), query(':leave', [ style({ transform: 'translate(0, 0)' }), animate('0.5s ease-in-out', style({ transform: 'translate(0, 100%)', opacity: 0 })) ], { optional: true }), ]) ]) |