Angular2 - 애니메이션이 적용되지 않음

Question

저는 Angular2 앱을 사용하고 있으며 라우팅에 애니메이션을 추가하려고합니다. 따라서 페이지를 변경할 때 슬라이드가 발생합니다. 들어오는 애니메이션은 잘 작동하지만 떠나는 애니메이션은 활성화되지 않습니다. 이전 페이지는 새 페이지가로드 된 후에 사라집니다. 누구든지이 문제의 원인을 알고 있습니까? plunker

anuglar2 docs에 따르면 제 전환이 올바른 것 같습니다.

// transition(':enter', [ ... ]); // void => * 
// transition(':leave', [ ... ]); // * => void 

애니메이션 파일

export function routerTransition() { 
    return trigger('routerTransition', [ 
     transition('void => *', [ 
      style({ transform: 'translateX(100%)' }), 
      animate(1000) 
     ]), 
     transition('* => void', [ 
      style({ transform: 'translateX(-100%)' }), 
      animate(1000) 
     ]) 
    ]) 
} 

child_1.component.ts

import { Component } from '@angular/core'; 
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms' 
import { Router } from '@angular/router'; 
import { Observable } from 'rxjs/Rx'; 
import { routerTransition } from '../../directives/router.animation'; 
@Component({ 
    selector: 'about', 
    template: require('./about.component.html'), 
    styles: [require('./about.component.css')], 
    animations: [routerTransition()], 
    host: { '[@routerTransition]': '' } 
}) 

child_2.component.ts

import { Component } from '@angular/core'; 
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms' 
import { Router } from '@angular/router'; 
import { Observable } from 'rxjs/Rx'; 
import { routerTransition } from '../../directives/router.animation'; 
@Component({ 
    selector: 'home-info', 
    template: require('./home.component.html'), 
    styles: [require('./home.component.css')], 
    animations: [routerTransition()], 
    host: { '[@routerTransition]': '' } 
}) 

Answer 1

애니메이션 코드를 다음과 같이 변경해야한다고 생각합니다.

export function routerTransition() { 
    return trigger('routerTransition', [ 
     state('void', style({position:'fixed', width:'100%'})), 
     state('*', style({position:'fixed', width:'100%'})), 
     transition('void => *', [ 
      style({transform: 'translateX(-100%)'}), 
      animate('0.5s ease-in-out', style({transform: 'translateX(0%)'})) 
     ]), 
     transition('* => void', [ 
      style({transform: 'translateX(0%)'}), 
      animate('0.5s ease-in-out', style({transform: 'translateX(100%)'})) 
     ]) 
    ]) 
} 

다음은 예에게 있습니다 Plunk

참고 : 각도 4에서 이 애니메이션은 @ 각도/핵심에서 벗어나보다 쉽게 ​​문서를 찾을 수 및 자동 완성 더 잘 활용할 수있는 패키지로 당긴.

Answer 2

두 가지 주요 문제가있는 것 같습니다 :

1. 탈퇴 전환은 입력 전환과 동일한 방식으로 정의되지만 전환 스타일의 '시작'상태 대신 '종료'상태로 사용되도록 다르게 정의해야합니다.

   // Instead of 
   transition('* => void', [ 
       style({ transform: 'translateX(-100%)' }), 
       animate(1000) 
   ]) 
   
   // Use 
   transition('* => void', 
       animate(1000, style({transform: 'translateX(-100%)', opacity: 0})) 
   ) 
   

2. 귀하는 인라인의와는 블록에서 작동 번역, 그렇지 않은 호스트 display:block (또는 inline-block을)이 필요합니다.

애니메이션이 아마 적어도 그것의 더 또는 덜 작업의 출발점 원하는 아니지만

// Instead of 
host: { '[@routerTransition]': '' } 

// Use 
host: { 
    '[@routerTransition]': 'true', 
    '[style.display]': "'block'", 
}, 

: 여기 https://plnkr.co/edit/eFrjtTOtXkWp8IUeAYdo?p=preview

은 각 사람의 또 다른 예입니다 : http://plnkr.co/edit/yJHjL5ap9l4MwOimCyyY?p=preview