Angular - 使用变换设置动画,但在动画完成时不应用绝对位置
Posted
技术标签:
【中文标题】Angular - 使用变换设置动画,但在动画完成时不应用绝对位置【英文标题】:Angular - animate using transform but don't apply position absolute when the animation is finished 【发布时间】:2017-10-12 12:45:30 【问题描述】:所以我正在尝试应用一些流畅的动画,它们的效果还不错,但效果不是很好,因为它们会破坏布局。
问题是我需要在制作动画时使用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
来实现这一点,但这只会导致动画完全中断。
是否有可能实现我想要的,如果可以,我将如何去做?
【问题讨论】:
【参考方案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)'))
])
]);
【讨论】:
以上是关于Angular - 使用变换设置动画,但在动画完成时不应用绝对位置的主要内容,如果未能解决你的问题,请参考以下文章