角度 - 動畫使用變換，但不完全適用動畫完成時的位置

Question

所以我試圖應用一些光滑的動畫，他們工作挺好但不是很多，因爲他們打破布局很多。

的問題是，我需要使用position: absolute動畫的時候，這樣我可以用transform，如下所示：

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 = ''; 
} 

雖然這個工作，它打破元素的高度當動畫完成時，由於組件不再是頁面流的一部分。

相反，我想要做的就像上面的動畫，但動畫完成後，我想刪除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)'})) 
    ]) 
    ]); 
}