애니메이션 전환 끝에서 상태를 변경하는 방법은 무엇입니까? - 각도 2

Question

안녕하세요 저는이 튜토리얼에서 표시된대로 라우터 전환을 할 내 각도 2 응용 프로그램을 얻으려고하고 있어요.

Router Transition Tutorial

Demo Link

나는 애니메이션 정말 새로 온 사람과 위치의 컴퍼넌트의 스타일을 떠나 주와 함께하는 데 문제가 : 더 스크롤을 허용하지를 해결했습니다. 나는 : 엔트리가 끝날 때 사용자 정의 상태로 상태를 어떻게 바꿀 수 있는지 알고 싶습니다.

function slideToRight() { 
    return trigger('routerTransition', [ 
    state('void', style({position:'fixed', width:'100%'})), 
    state('*', style({position:'fixed', width:'100%'})), 
    state('visible', style({position:'static', width:'initial'})), 
    transition(':enter => visible', [ //<-- my attempt at switching the state 
     style({transform: 'translateX(-100%)'}), 
     animate('0.5s ease-in-out', style({transform: 'translateX(0%)'})), 
    ]), 
    transition('visible => :leave', [ //<-- my attempt at switching the state 
     style({transform: 'translateX(0%)'}), 
     animate('0.5s ease-in-out', style({transform: 'translateX(100%)'})) 
    ]) 
    ]); 
} 

Answer 1

전환 내에서 style을 대신 사용해보십시오. slideToLeft 기능

예 :

function slideToLeft() { 
    return trigger('routerTransition', [ 
    transition(':enter', [ 
     style({transform: 'translateX(100%)', position:'fixed', width:'100%'}), 
     animate('0.5s ease-in-out', style({transform: 'translateX(0%)'})) 
    ]), 
    transition(':leave', [ 
     style({transform: 'translateX(0%)', position:'fixed', width:'100%'}), 
     animate('0.5s ease-in-out', style({transform: 'translateX(-100%)'})) 
    ]) 
    ]); 
}