Ich versuche, Routenanimationen in einem Angular CLI-Projekt mit Angular/4 zu implementieren. Ich habe versucht, this Tutorial zu folgen, aber mit begrenztem Erfolg.Angular/4 - Route Animation funktioniert nicht
Mein Code liest
/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,
...
Die Animation nie anders läuft, hat vor dem Laden der Seite abgeschlossen. Nicht sicher was. Kann jemand den Fehler in meinem Code finden? Jeder Rat wird sehr geschätzt
können Sie einen Plünderer erstellen? – Aravind
Nur eine kurze Notiz, dass Routenanimationen geändert werden (sollte 4.1 sein, wird jetzt später sein), um solche Probleme zu lösen, also sollten Sie bald mehr Informationen über diese Dinge sehen. – chrispy
Haben Sie die Dokumente gelesen? https://angular.io/guide/router#adding-animations-to-the-routed-component. Das von Ihnen verwendete Lernprogramm erscheint basierend auf seinem Datum aktuell, aber es ist immer noch nicht mehr aktuell, da er Host-Metadaten verwendet und nicht @HostBindings – mtpultz