Winkel - /4 - Route-animation nicht funktioniert

Ich versuche, umzusetzen route Animationen in einer Eckigen CLI-Projekt mit Eckig/4. Ich habe versucht zu Folgen, diese tutorial, aber mit begrenztem Erfolg.

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.Komponente.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.- Modul.ts

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

Die animation läuft niemals mit anderen, hat abgeschlossen, bevor das laden der Seite. Nicht sicher, welche. Kann jemand vor Ort die Fehler in meinem code? Jede Beratung wird sehr geschätzt

können Sie erstellen, plunker?
Nur ein kurzer Hinweis, dass die route Animationen geändert werden (war wohl zu 4.1, werden nun später) zu lösen, Probleme wie diese, so dass Sie sehen werden, mehr Informationen über diese Dinge bald.
Haben Sie sich durch die docs? Winkel.io/guide/.... Das tutorial, die Sie verwenden, erscheint die jüngsten, basierend auf das Datum, aber es ist immer noch veraltet, da er die Verwendung von host-Metadaten und nicht @HostBindings
Auch dies ist etwas Eckig animation "eye-candy" slides.yearofmoo.com/ng-japan-2017-demo, und Sie können überprüfen, die zugehörigen Folien slides.yearofmoo.com/ng-japan-2017-slides/#/0/0, welche die route animation Informationen
Wenn Sie Eckig Material check out oder schauen Sie sich diese Ausgabe, die angezeigt wird, um zu verhindern, dass die route Animationen auftreten von github.com/angular/material2/issues/5107 in v4.2.2

InformationsquelleAutor prime | 2017-04-27

angular animation

Erzielen Sie eine glatte fade-out /in-Effekt nun mit route-Animationen.

Definieren Sie Ihre animation und route übergänge es gilt:

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

Kommentieren Sie Ihre router-Steckdose im template:

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

Zurück in Ihre app.Komponente.ts Umsetzung der prepareRouteTransition(outlet) Funktion:

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

Wenn Sie möchten benutzerdefinierte Animationen je nachdem, welche route ist kommen/gehen, müssen Sie einige Metadaten zu den Routen. Check-out Matias Niemela sprechen bei ng-conf 2017 hier für mehr info, aber seine demo-Projekt enthält ein Beispiel.

das demo-Projekt nicht richtig funktioniert, wird Sie bieten die detaillierte code-Struktur

InformationsquelleAutor SpaceFozzy

1

Yeah, dieser ist leicht und ein bisschen subtil auf den ersten.

Nicht die host Komponente Eigenschaft. Das ist nicht etwas zu tun für Sie.

Stattdessen, was Sie tun möchten, ist fügen Sie die synthetische Eigenschaft @yourTrigger des "host" - element der Komponente, die Sie animieren möchten. Wenn die Komponente hat einen Selektor geschrieben wird in einer Vorlage als <app-dashboard>, dann, was Sie versuchen zu tun ist, fügen Sie ein "Attribut": <app-dashboard @yourTrigger>

Dazu können Sie in der Komponente selbst mit @HostBinding:
```
@Component({
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.css'],
    animations: [routeAnimation],
})
export class DashboardComponent {
    @HostBinding('@routeAnimation') routeAnimation = true;
}
```
@HostBinding setzt eine Bindung der Komponente host-element. Dies ist das gleiche element, das Sie mit Adresse :host im template CSS.

Beachten Sie, dass Sie sowohl die animations Eigenschaft für die Komponente und die @HostBinding Dekorateur. Der Wert von HostBinding sollten die trigger, die Sie verwenden in der animation auf die in fadeInAnimation. Die tutorials immer nennen diese Auslöser routeAnimation und ich bin mir nicht sicher, wie besonders das ist, aber es ist wahrscheinlich eine gute Praxis.
- Ich couldnot verstehen Sie. Und ich habe versucht, was Sie gesagt haben, Gleiches Ergebnis Funktioniert Nicht
- Müssen Sie auch ändern Sie den trigger in der animation zu routeAnimation.
InformationsquelleAutor John Christopher Jones

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.