Question

我试图在Angular 4.0.1中的每个路由转换上进行淡入/淡出。我已经看过无数的滑入/滑出＆＃39;教程，但那些天堂对我有用。

这是我的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是可变的并且组件加载发生变化，上面的代码不起作用吗？

应用程序中的所有路由都由自定义路由服务（路由器的包装器）处理，每次网址更改发生时，我都可以向app.component发送广播，延迟路由（时间：离开过渡）？

我可以在app-routing.module中指定我想要使用动画的位置吗？

有谁知道这应该如何运作？或者在角度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";
    });

router.service.ts

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

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

Angular4 |路线转换 - FadeIn / FadeOut

1 个答案: