Angular 2 라우트 된 구성 요소의 void 상태에 애니메이션 적용

Question

구성 데코레이터의 host 속성을 사용하여 * => void의 전환 상태를 포함하는 애니메이션 트리거를 선언하고 있습니다.

나는 테스트를 위해 800ms의 지속 시간을 적용 했으므로 (테스트를 위해 5 초로 변경 했음), 다른 구성 요소로 이동시키는 routerLink를 클릭하면 트리거가 발생한다는 것을 알고 있습니다. 두 번째 지연이 발생합니다.

문제는 애니메이션이 발생하지 않는다는 것입니다. 왼쪽으로 슬라이딩 및 불투명도에 퇴색한다 : 0

는 다음 구성 요소 장식 내 코드입니다 :

host: { 
    '[@slideInOutright]': 'true', 
}, 
animations: [ 

    trigger('slideInOutright', [ 

    state('*', style({transform: 'translateX(0)'})), 

    transition('void => *', [ 
     style({transform: 'translateX(150px)', opacity:'1'}), 
     animate('300ms 500ms ease-out') 
    ]), 
    transition('* => void', [ 
     animate('800ms', style({transform: 'translateX(-60px)',opacity: '0'})) 
    ]) 
    ]) 

] 

Answer 1

당신은 당신의 상태 true 대신 *의 호출해야합니다.