Я пытаюсь реализовать анимацию маршрута в проекте Angular CLI, используя Angular/4. Я пытался следовать этому руководству, но с ограниченным успехом.
Мой код читается
/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,
...
Анимация никогда не запускается еще, завершилась до загрузки страницы. Не уверен, что. Может ли кто-нибудь обнаружить ошибку в моем коде? Любые советы высоко ценится