我正在尝试在 Angular 4.0.1 中的每个路线转换上进行淡入/淡出。我看过无数的“滑入/滑出”教程,但这些对我不起作用。
这是我的应用程序组件
组件:
@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 应该是变量并在组件加载时更改吗?
应用程序中的所有路由都是由自定义路由服务(路由器的包装器)处理的,每次 url 发生更改时,我都可以向 app.component 发送广播,并延迟路由(:leave 的时间)过渡)?
我可以指定在 app-routing.module 中的何处使用动画吗?
有谁知道这应该如何工作?或者在 Angular 4.0.1 中提供一个具有复杂路由的工作示例(子级且不使用 routerlink)
最佳答案
通过使用广播更改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";
});
路由器.service.ts
this.broadcastService.broadcast('animateStart');
setTimeout(() => {
this.broadcastService.broadcast('animateStop');
this.router.navigate(this.currentUrl);
}, 500)
仍然仅在使用自定义路由器服务时有效,routerLink= ...
不起作用。
关于javascript - Angular4 |路线转换 - 淡入/淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43469296/