Angular/4 路由动画不起作用

Question

我正在尝试在使用 Angular/4 的 Angular CLI 项目中实现路由动画。我一直在尝试遵循这个教程，但是进展有限。

我的代码如下：

/src/app/_animations/fadein.animation.ts

import { trigger, state, animate, transition, style } from '@angular/animations';

export const fadeInAnimation =
// trigger name for attaching this animation to an element using the 
[@triggerName] syntax
    trigger('fadeInAnimation', [

        // route 'enter' transition
        transition(':enter', [
         // css styles at start of transition
        style({ opacity: 0 }),
         // animation and styles at end of transition
        animate('3000ms', style({ opacity: 1 }))
    ]),
]);

/src/app/dashboard/dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { SlimLoadingBarService } from 'ng2-slim-loading-bar';

// import fade in animation
import { fadeInAnimation } from './../_animations/fadein.animation';

import { PickJob } from './../pick-jobs/pick-job';
import { PickJobService } from './../pick-jobs/pick-job.service';
import { FlashService } from './../flash/flash.service';

@Component({
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.css'],
    animations: [fadeInAnimation],
    host: { '[@fadeInAnimation]': '' }
})
export class DashboardComponent {}

/src/app/dashboard/dashboard.component.html

<div class="container_flex">
    <div class="row">
        <div class="col-md-12">
            <div class="btn btn-block btn-primary block shadow">
                Print Next Pick Job
            </div>
            <a class="btn btn-block btn-danger shadow" routerLink="/pick-jobs" routerLinkActive="menu-active">
                List Pick Jobs
            </a>
            <a class="btn btn-block btn-warning shadow" routerLink="/cages/assign" routerLinkActive="menu-active">
                Print Pick Cage Labels
            </a>
        </div>
    </div>
</div>

/src/app/app.module.ts

...
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
@NgModule({
  imports: [    
      ...
      BrowserAnimationsModule,
      ...

动画从未运行过，已在页面加载之前完成。不确定具体原因。有人能找出我的代码错误吗？非常感谢任何建议。

- prime

---

你能创建一个 Plunker 吗？ - Aravind

只是一个快速的提醒，路由动画正在进行更改（原本应该是4.1版本，现在将会晚些推出），以解决这类问题，因此您很快就会看到更多关于这些事情的信息。 - chrispy

你有看过文档吗？https://angular.io/guide/router#adding-animations-to-the-routed-component。你正在使用的教程看起来是最近的，但它仍然已经过时了，因为它使用了主机元数据而不是@HostBindings。 - mtpultz

此外，这是一些 Angular 动画糖果 http://slides.yearofmoo.com/ng-japan-2017-demo/，您可以查看相关的幻灯片 http://slides.yearofmoo.com/ng-japan-2017-slides/#/0/0/，其中包含路由动画信息。 - mtpultz

如果您正在使用Angular Material，请查看或关注此问题，该问题似乎会阻止路由动画发生 https://github.com/angular/material2/issues/5107 在v4.2.2中。 - mtpultz

Answer 1

现在您可以使用路由动画实现平滑的淡出/淡入效果。

定义您的动画和应用于其的路由过渡：

const fadeIn = [
  query(':leave', style({ position: 'absolute', left: 0, right: 0, opacity: 1 })),
  query(':enter', style({ position: 'absolute', left: 0, right: 0, opacity: 0 })),
  query(':leave', animate('1s', style({ opacity: 0 }))),
  query(':enter', animate('1s', style({ opacity: 1 })))
]

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  /* Allow CSS in this component to cascade down to child components */
  encapsulation: ViewEncapsulation.None,
  animations: [
    trigger('routerAnimations', [
      transition('* => *', fadeIn)
    ])
  ]
})

在您的模板中注释您的路由器出口:

<div class="page" [@routerAnimations]="prepareRouteTransition(outlet)">
  <router-outlet #outlet="outlet"></router-outlet>
</div>

在您的app.component.ts中，实现prepareRouteTransition(outlet)函数：

prepareRouteTransition(outlet) {
    const animation = outlet.activatedRouteData['animation'] || {};
    return animation['value'] || null;
}

如果您想根据路由的进出来制定自定义动画，需要为您的路由添加一些元数据。查看Matias Niemela在ng-conf 2017的演讲此处获取更多信息，但他的演示项目包含了一个可行的示例。

- SpaceFozzy

---

演示项目无法正常运作，您能提供详细的代码结构吗？ - Jomal Johny

Answer 2

这个很容易，一开始有点微妙。

不要使用 host 组件属性，那对你没有任何帮助。

相反，你想做的是在你想要动画的组件的 "host" 元素中添加合成属性 @yourTrigger。如果该组件具有在模板中写为 <app-dashboard> 的选择器，则你要尝试添加一个 "attribute": <app-dashboard @yourTrigger>

你可以使用 @HostBinding 在组件本身中完成此操作：

@Component({
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.css'],
    animations: [routeAnimation],
})
export class DashboardComponent {
    @HostBinding('@routeAnimation') routeAnimation = true;
}

@HostBinding 设置组件宿主元素的绑定。这是您在模板CSS中使用:host来引用的相同元素。

请注意，您需要同时在组件上设置animations属性和@HostBinding装饰器。 HostBinding的值应该是您在fadeInAnimation中引用的动画触发器。教程总是将此触发器称为routeAnimation，我不确定这有多特殊，但这可能是一个好习惯。

- John Christopher Jones

---

我无法理解你的意思。我已经尝试了你所说的，但结果仍然不起作用。 - Madhan

你还需要将动画中的触发器更改为 routeAnimation。 - John Christopher Jones