Attempting to incorporate some fancy animations into my project, but running into layout issues when using position: absolute for the animation with 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)'}))
])
]);
}
Usage:
@Component({
animation: [SlideLeft()]
})
export class SomeComponent {
@HostBinding('@slideLeft') value = '';
}
While this animation method is effective, it disrupts element heights once the animation completes since the component is no longer in page flow.
I aim to maintain the animated effect as shown above, but revert the position: absolute styling after the animation concludes.
Removing position: absolute from the void and * styles did not yield the desired outcome; instead, it caused a breakdown in the animation itself.
Is there a way to achieve my goal, and if so, how should I approach it?