1

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

上面的代码不起作用，@RouterAnimation 是否应该是可变的并在组件加载时发生变化？

应用程序中的所有路由都由自定义路由服务（Router 的包装器）处理，我可以在每次 url 更改发生时向 app.component 发送广播，并延迟路由（:leave 转换的时间）？

我可以在 app-routing.module 中指定我想在哪里使用动画吗？

有谁知道这应该如何工作？或者在 Angular 4.0.1 中有一个具有复杂路由的工作示例（儿童而不使用 routerlink）

4

1 回答 1

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

路由器服务.ts

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

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

于 2017-04-19T10:46:38.460 回答