2017-04-27 4 views
12

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

+0

können Sie einen Plünderer erstellen? – Aravind

+0

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

+0

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

Antwort

1

Ja, das ist einfach und ein bisschen subtil auf den ersten.

Verwenden Sie nicht die Komponenteneigenschaft host. Das tut nichts für dich.

Stattdessen müssen Sie die synthetische Eigenschaft @yourTrigger dem Element "host" der Komponente hinzufügen, die Sie animieren möchten. Wenn diese Komponente einen Selektor aufweist, die in einer Vorlage als <app-dashboard> geschrieben ist, dann, was Sie versuchen zu tun, ein „Attribut“ add: <app-dashboard @yourTrigger>

Sie können dies in der Komponente selbst mit @HostBinding:

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

@HostBinding legt eine Bindung für das Hostelement der Komponente fest. Dies ist das gleiche Element, das Sie im CSS Ihrer Vorlage mit :host ansprechen.

Beachten Sie, dass Sie die animations Eigenschaft auf der Komponente und die @HostBinding Dekorateur benötigen. Der Wert von HostBinding sollte der Auslöser sein, den Sie in der Animation verwenden, auf die in verwiesen wird. Die Tutorials nennen diesen Trigger immer routeAnimation und ich bin mir nicht sicher, wie speziell das ist, aber es ist wahrscheinlich eine gute Übung.

+0

Ich konnte Sie nicht verstehen. Und ich habe versucht, was Sie sagten, dasselbe Ergebnis funktioniert nicht – Madhan

+0

Sie müssen auch den Auslöser in der Animation zu 'routeAnimation' ändern. –

1

Ihr Code scheint ohne Fehler zu sein, aber von dem, was Sie gemacht haben, ist Ihre Dashboard-Komponente der einzige Eintrag, der eingeblendet wird (es gibt keine Routing-Animationen). Wahrscheinlich wird keine Animation angezeigt, da sie vor dem Laden der Anwendung gestartet wird.

Wenn Sie schauen, Animationen auf Routing-Änderungen hinzufügen, die Sie benötigen (sicherzustellen, dass alles Punkte an die richtige Stelle machen)

import { fadeInAnimation } from '../_animations/index'; 

@Component({ 
    moduleId: module.id.toString(), 
    templateUrl: 'home.component.html', 
    animations: [fadeInAnimation], 
    host: { '[@fadeInAnimation]': '' } 
}) 

zu jeder Kind Komponente anzuwenden, die weitergeleitet wird. In Ihrer Dashboard-Komponente gibt es Router-Links zu Pick-Jobs und Cage/Assign. Für alle Komponenten, die geladen werden müssen, muss der obige Code zur Datei component.ts hinzugefügt werden.

Schauen Sie sich die Seite mit dem Beispiel, das Sie mit gearbeitet haben und schauen näher am Tutorial Demo: http://jasonwatmore.com/post/2017/04/19/angular-2-4-router-animation-tutorial-example

Ihre Dashboard-Komponente ist zu seiner App Komponente Äquivalent (für diesen Zweck Wege Animieren) und nicht brauche eine Animation (und wenn du dies tust, solltest du eine Verzögerung von vielleicht 3 Sekunden oder so hinzufügen, bevor sie ausgelöst wird ... aber es wird nicht empfohlen). Sie sollten die Animation auf Ihre PickJob-Komponente anwenden, was dem seiner /home/home.component.ts entspricht. Nachdem Sie den Animations-Import-Part zur Pick-Job-Komponente hinzugefügt haben, sollten Sie eine Einblend-Animation sehen, wenn Sie auf/route klicken.

+0

Nicht funktioniert Bagley.InFact Ich versuchte mit der gleichen Website.Verwendet neuesten eckigen Cli.it funktioniert nicht – Madhan

+0

Lassen Sie mich einige Test-Code ausführen und zu Ihnen zurück. –

+0

Tu mir einen Gefallen und klon das Repo: https://github.com/cornfloorblue/angular2-animation-tutorial-example, dann 'npm install' und' npm start' und lass es mich wissen, wenn es funktioniert. Es funktioniert an meinem Ende. –

5

Mit den Routenanimationen können Sie nun ein sanftes Ein-/Ausblenden erzielen.

Ihre Animation und Routenübergänge definieren es gilt für:

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) 
    ]) 
    ] 
}) 

in Ihrer Vorlage Ihres Routers Steckdose Anmerken:

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

Zurück in Ihrem app.component.ts implementieren die Funktion prepareRouteTransition(outlet) :

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

Wenn Sie benutzerdefinierte Animationen abhängig von der Route erstellen möchten, müssen Sie den Routen einige Metadaten hinzufügen. Schauen Sie sich Matias Niemelas Vortrag bei ng-conf 2017 here für weitere Informationen an, aber his demo project enthält ein funktionierendes Beispiel.