Angular - 使用变换制作动画但在动画完成时不应用绝对位置
Angular - animate using transform but don't apply position absolute when the animation is finished
所以我正在尝试应用一些流畅的动画,它们的效果还不错,但效果不是很好,因为它们经常破坏布局。
问题是我需要在制作动画时使用 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
来实现这一点,但这只会导致动画完全中断。
是否有可能实现我想要的,如果可以,我将如何实现?
这会起作用,它只会为 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)'}))
])
]);
}
所以我正在尝试应用一些流畅的动画,它们的效果还不错,但效果不是很好,因为它们经常破坏布局。
问题是我需要在制作动画时使用 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
来实现这一点,但这只会导致动画完全中断。
是否有可能实现我想要的,如果可以,我将如何实现?
这会起作用,它只会为 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)'}))
])
]);
}