角度 - 动画使用变换，但不完全适用动画完成时的位置

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)'})) 
    ]) 
    ]); 
}