Angular/4 - 路线动画不起作用

Question

我正在尝试使用 Angular/4 在 Angular CLI 项目中实现路由动画。我一直在尝试遵循 this 教程，但收效甚微。

我的代码读取

/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,
      ...

动画从不运行，在页面加载之前完成。不确定是哪个。有人能在我的代码中发现错误吗？非常感谢任何建议

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 here 上的演讲了解更多信息，但 his demo project 包含一个工作示例。

Answer 2

是的，这个一开始很简单而且有点微妙。

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

相反，您要做的是将合成属性@yourTrigger 添加到您要设置动画的组件的“宿主”元素中。如果该组件有一个在模板中编写为<app-dashboard> 的选择器，那么您要做的是添加一个“属性”：<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，我不确定这有多特别，但这可能是一个好习惯。