Angular4 /Route跃迁- FadeIn / FadeOut

Question

我试图在每一个角度为4.0.1的路线过渡上做一个淡入/淡出。我看过无数的“滑入/滑出”教程，但这些都不适合我。

这是我的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>

上面的代码不起作用，@Router动画是否应该是可变的，并在组件加载时进行更改？

应用程序中的所有路由都是由自定义路由服务(路由器的包装器)处理的，每次发生url更改时，我都可以向app.component发送一个广播，有延迟的路由(离开转换的时间)？

我可以指定在我的应用程序-routing.Module中使用动画的位置吗？

有人知道该怎么做吗？或者在具有复杂路由的角4.0.1中有一个工作示例(儿童，不使用路由链接)

Answer 1

通过使用广播更改routeAnimation触发器来解决这个问题。

我还是觉得有点不舒服，我觉得还有更好的办法。如果有人有更好的主意，请告诉我！

扳机：

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= ...不工作。