javascript - Angular4 |路线转换 - 淡入/淡出

Question

我正在尝试在 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)

Answer 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";
    });

路由器.service.ts

this.broadcastService.broadcast('animateStart');
    setTimeout(() => {
        this.broadcastService.broadcast('animateStop');
        this.router.navigate(this.currentUrl);
    }, 500)

仍然仅在使用自定义路由器服务时有效，routerLink= ... 不起作用。