각도 - 변환을 사용하여 애니메이트하지만 애니메이션이 끝날 때 위치 절대 값을 적용하지 않습니다.

Question

그래서 매끄러운 애니메이션을 적용하려고합니다.

export function SlideLeft() { 

    return trigger('slideLeft', [ 
    state('void', style({position: 'absolute', width: '100%', transform: 'translate3d(100%, 0, 0)'})), 
    state('*', style({position: 'absolute', width: '100%', transform: 'translate3d(0, 0, 0)'})), 
    transition(':enter', [ 
     style({transform: 'translate3d(100%, 0, 0)'}), 
     animate('400ms ease', style({transform: 'translate3d(0, 0, 0)'})) 
    ]), 
    transition(':leave', [ 
     style({transform: 'translate3d(0, 0, 0)'}), 
     animate('400ms ease', style({transform: 'translate3d(100%, 0, 0)'})) 
    ]) 
    ]); 
} 

사용법 :이 작동하지만

@Component({ 
    animation: [SlideLeft()] 
}) 

export class SomeComponent { 

    @HostBinding('@slideLeft') value = ''; 
} 

, 그것은 분해 요소의 높이를

문제는 내가 transform을 사용할 수 있도록 애니메이션을 할 때 여기 바와 같이 나는 position: absolute를 사용할 필요가있다 애니메이션이 완료되면 구성 요소가 더 이상 페이지 흐름에 포함되지 않기 때문입니다.

대신 위와 같이 애니메이션을 적용하고 싶습니다. 애니메이션을 완료하면 position: absolute 비트를 제거하고 싶습니다.

void 및 * 스타일 개체에서 position: absolute을 제거하여이 작업을 수행 할 수 있다고 생각했지만 애니메이션이 완전히 중단됩니다.

내가 원하는 것을 성취 할 수 있습니까? 그렇다면 어떻게 될까요?

Answer 1

이 단지 absolute 위치를 애니메이션 것, 작동하지만 요소에 그것을 떠나지 않을 것 :

export function SlideLeft() { 

    return trigger('slideLeft', [ 
    state('*', style({position: relative, width: '100%'})), 
    transition(':enter', [ 
     style({position: 'absolute', transform: 'translate3d(100%, 0, 0)'}), 
     animate('400ms ease', style({transform: 'translate3d(0, 0, 0)'})) 
    ]), 
    transition(':leave', [ 
     style({position: 'absolute', transform: 'translate3d(0, 0, 0)'}), 
     animate('400ms ease', style({transform: 'translate3d(100%, 0, 0)'})) 
    ]) 
    ]); 
}