Angular 路由前的动画
Angular animate before routing
在我当前的项目中,我试图摆脱 Angular 动画在路由时跳过的问题。在我的模板中,我有不同的 "widgets" 和 mat-card 在 css-grid 布局中,我想让它平滑地出现和消失。
我在子组件(路由指向的)中的动画看起来像
animations: [
trigger('cardAnimation', [
state('void', style({ opacity: 0, transform: 'scale(0.5)' })),
state('*', style({ opacity: 1, transform: 'scale(1)' })),
transition('void => *', animate('500ms ease-in')),
transition('* => void', animate('500ms ease-in'))
])
]
简化的模板如下所示
<mat-card @cardAnimation>
</mat-card>
<mat-card @cardAnimation>
</mat-card>
卡片出现时带有动画,但路由直接更改为下一条路由,无需等待动画。我还在转换中的 query
中使用 animateChild()
进行了测试,但这没有帮助。我怎样才能让路由器等待他们?
感谢和欢呼!
当路线改变时,组件被销毁并且不能再被动画化。如果您想在组件被销毁之前对其进行动画处理,您可以使用 CanDeactivate
守卫,以确保组件在销毁之前可以被停用。
这是一个实现示例:
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
canDeactivate(component: CanComponentDeactivate) {
return component.canDeactivate ? component.canDeactivate() : true;
}
}
然后在路由模块声明中:
RouterModule.forChild([
{ path: '', component: HelloComponent,
canDeactivate: [CanDeactivateGuard] }
])
之后你可以利用ngOnInit
和canDeactivate
播放开始和结束动画:
ngOnInit() {
this.animation = this._builder.build(this.slideIn(this.ANIMATION_TIME));
this.player = this.animation.create(this.el.nativeElement, {});
this.player.play();
}
canDeactivate() {
this.animation = this._builder.build(this.slideOut(this.ANIMATION_TIME));
this.player = this.animation.create(this.el.nativeElement, {});
this.player.play();
return timer(this.ANIMATION_TIME).pipe(mapTo(true)).toPromise();
}
Here is a running example with this suggested solution.
为了简单易用,我制作了一个处理动画的抽象组件,通过简单地扩展抽象组件,将动画行为添加到任何组件。
在我当前的项目中,我试图摆脱 Angular 动画在路由时跳过的问题。在我的模板中,我有不同的 "widgets" 和 mat-card 在 css-grid 布局中,我想让它平滑地出现和消失。
我在子组件(路由指向的)中的动画看起来像
animations: [
trigger('cardAnimation', [
state('void', style({ opacity: 0, transform: 'scale(0.5)' })),
state('*', style({ opacity: 1, transform: 'scale(1)' })),
transition('void => *', animate('500ms ease-in')),
transition('* => void', animate('500ms ease-in'))
])
]
简化的模板如下所示
<mat-card @cardAnimation>
</mat-card>
<mat-card @cardAnimation>
</mat-card>
卡片出现时带有动画,但路由直接更改为下一条路由,无需等待动画。我还在转换中的 query
中使用 animateChild()
进行了测试,但这没有帮助。我怎样才能让路由器等待他们?
感谢和欢呼!
当路线改变时,组件被销毁并且不能再被动画化。如果您想在组件被销毁之前对其进行动画处理,您可以使用 CanDeactivate
守卫,以确保组件在销毁之前可以被停用。
这是一个实现示例:
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
canDeactivate(component: CanComponentDeactivate) {
return component.canDeactivate ? component.canDeactivate() : true;
}
}
然后在路由模块声明中:
RouterModule.forChild([
{ path: '', component: HelloComponent,
canDeactivate: [CanDeactivateGuard] }
])
之后你可以利用ngOnInit
和canDeactivate
播放开始和结束动画:
ngOnInit() {
this.animation = this._builder.build(this.slideIn(this.ANIMATION_TIME));
this.player = this.animation.create(this.el.nativeElement, {});
this.player.play();
}
canDeactivate() {
this.animation = this._builder.build(this.slideOut(this.ANIMATION_TIME));
this.player = this.animation.create(this.el.nativeElement, {});
this.player.play();
return timer(this.ANIMATION_TIME).pipe(mapTo(true)).toPromise();
}
Here is a running example with this suggested solution.
为了简单易用,我制作了一个处理动画的抽象组件,通过简单地扩展抽象组件,将动画行为添加到任何组件。