Angular4 | Routetransitions - FadeIn/FadeOut
问题描述:
我正在尝试在Angular 4.0.1的每个路径转换中进行淡入/淡出。我已经看到无数的“滑入/滑出”教程,但这些对我来说并不合适。Angular4 | Routetransitions - FadeIn/FadeOut
这是我app.component
组件:
@Component({
selector: 'app',
templateUrl: 'app.component.html',
animations: [trigger('RouterAnimation', [
state('void', style({opacity:0})),
state('*', style({opacity:1})),
transition(':enter', [
style({opacity: 0}),
animate(2000, style({opacity: 1})),
]),
transition(':leave', [
style({opacity: 1}),
animate(1000, style({opacity: 0})),
])
])],
host: {'[@RouterAnimation]': 'true'}
})
HTML:
<notification></notification>
<div class="page-wrapper">
<login-register></login-register>
<app-header></app-header>
<sub-header></sub-header>
<router-outlet></router-outlet>
<router-outlet name="popup"></router-outlet>
<app-footer></app-footer>
</div>
上面的代码不工作,应@RouterAnimation是可变的,组件负载的变化?
应用程序中的所有路由都由自定义路由服务(Router的包装器)处理,每次发生URL更改时都可以向app.component发送广播,并使用延迟路由(时间:离开过渡)?
我可以指定我要在我的app-routing.module中使用动画的位置吗?
有谁知道这应该如何工作?或者在角度为4.0.1的复杂路由(儿童和不使用路由器连接)中有一个工作示例
答
通过使用广播来更改routeAnimation触发器来解决此问题。
它仍然觉得有点hackish,我认为有一个更好的办法。如果有人有更好的主意,请告诉我!
触发:
trigger('RouterAnimation', [
state('void', style({opacity: 0})),
state('*', style({opacity: 1})),
transition('empty -> animate', [
animate(500, style({opacity: 1})),
]),
transition(':enter', [
animate(500, style({opacity: 1})),
]),
transition('animate -> empty', [
animate(500, style({opacity: 0})),
]),
transition(':leave', [
animate(500, style({opacity: 0})),
])
]
app.component.html:
<div style="opacity: 0" [@RouterAnimation]="animate" (@RouterAnimation.done)="animationDone($event)">
<div class="page-wrapper">
<login-register></login-register>
<app-header></app-header>
<sub-header></sub-header>
<router-outlet></router-outlet>
<router-outlet name="popup"></router-outlet>
<app-footer></app-footer>
</div>
</div>
app.component.ts:
this.broadcastService.on('animateStart').subscribe(() => {
this.animate = "empty";
});
this.broadcastService.on('animateStop').subscribe(() => {
this.animate = "animate";
});
router.service.ts
this.broadcastService.broadcast('animateStart');
setTimeout(() => {
this.broadcastService.broadcast('animateStop');
this.router.navigate(this.currentUrl);
}, 500)
仍然只适用于使用自定义路由器服务时,routerLink= ...
不起作用。