Angular2 Animation beim Laden und Page Transition
Derzeit zu versuchen, einige Animationen in meinem Angular2 Website mit ng2 ist gebaut animations
Komponente. So weit ich habe durch den Winkel-2 Developer Guide - Animations
in der Dokumentation. Mit, dass, obwohl ich habe ein paar Fragen, die ich hatte gehofft, die SO Gemeinschaft in der Lage sein könnte, zu unterstützen. Meine erste Frage/problem, das ich zu haben scheinen ist, dass die animation (von was ich sagen kann) nicht ausführen, beim laden der Seite. Es scheint zu laufen, völlig in Ordnung, wenn ich wechseln einen Blick, dann wieder zurück zu der Ansicht mit der animation. Dies ist der code, den ich verwende derzeit für die animation in Frage (kann ich die ganze Komponente, wenn gewünscht):
animations: [
trigger('kissState', [
state('in', style({opacity: 1})),
transition('void => *', [
style({opacity: 0}),
animate('250ms ease-in-out')
]),
transition('* => void', [
animate('250ms ease-in-out', style({opacity: 0}))
])
])
]
War ich unter dem Eindruck, dass die void => *
würde meine DOM-element opacity:0
und sobald es eingegeben in
zu der Ansicht, es wäre opacity:1
. Ein weiteres problem, das ich zu haben scheinen ist, dass meine Navigationen scheinen nicht zu funktionieren auf dem Handy. Ich habe nicht tatsächlich zog Sie dann auf meinen server, aber lokal entwickeln und Suche auf meinem mobilen Gerät über Knoten localtunnel
scheint es nicht zu sein, keine Animationen. Dies konnte sein, weil der seltsame localtunnel
betreibt, also bin ich nicht allzu sehr besorgt darüber, dass, bis ich kann wirklich testen Sie es auf einem realen server. Hier ist die andere animation, die insbesondere als ich merkte, es funktionierte nicht auf meinem mobilen Gerät:
animations: [
trigger('offScreenMenu', [
state('inactive', style({
opacity: 0,
zIndex: -10
})),
state('active', style({
backgroundColor: 'rgba(255, 255, 255, 0.8)',
zIndex: 10
})),
transition('inactive => active', animate('250ms ease-in')),
transition('active => inactive', animate('250ms ease-out'))
])
]
Ein letztes problem habe ich, das ist ein bekanntes Problem durch die Angular2 team-Animationen auf der router-Ansicht ändern. Es gibt derzeit einen SO Frage, die Adressen dieser und ein ticket auf der Angular2 repo (erwähnt in dem Kommentar von Günter Zöchbauer in der Frage ALSO). Mit, dass, ich war neugierig, ob es irgendwelche vorhanden workarounds? Durch einige kurze Forschung, es sah aus wie es kann zu einer Zeit implementiert wurden, eine ng-enter
und ng-leave
könnte man in Ihren css-Code für diese, aber was ich sagen kann, diese wurden abgeschafft. Noch müssen ein wenig mehr Forschung, so dass ich könnte falsch sein darüber.
Vielen Dank im Voraus für jede Hilfe!!!
UPDATE(7.7.16): Gut, also habe ich beschlossen, kommen zurück, um es und nach Herumspielen mit dem timing von der Seite laden-animation scheint es zu funktionieren. Wenn ich zu tun haben, etwa eine 1000ms
animation, um bemerkt zu werden. Das bringt mich zu den Fragen (oder eher Gedanke), dass ich glaube, dass die animation ausgeführt, bevor der DOM vollständig geladen wurde. Die scheint ein bisschen seltsam.
Arbeite noch an der mobilen animation situation. Suche wie werde ich Einreichen, ein Problem auf der Github-repo im moment habe ich ein Durcheinander mit ihm ein gutes Stück und kann nicht scheinen, um es zu arbeiten. Auch es scheint nicht, jede Erwähnung von mobilen Animationen, die nicht arbeiten, für NG2.
UPDATE(7.13.16): Sieht aus wie die Angular2 team hat ein paar fixes geplant, um die release mit RC5, der sollte meine oben genannten Bedenken. Antwort meine eigene Frage und schließen.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Schließen diese Frage. Die meisten Probleme, die ich oben erwähnt, schauen, wie Sie gelöst wurden, in RC5 von Angular2. Wie es aussieht, werden die Zeit des Wartens, bis dann. Hier die links zu den jeweiligen Themen/PRs in den Winkel-repo:
Meine Vermutung, dass Elemente wurden
animating
vor dem laden der Seite richtig war und behoben wurde in diesem PR: https://github.com/angular/angular/pull/9887RC5 enthält einen fix zu ermöglichen, Animationen auf der route ändern, über das PR: https://github.com/angular/angular/pull/9933 und NG2 wird es schließlich erlauben eine
query()
- Funktion für Animationen, die groß sein wird (mehr kann gefunden werden hier in dieser Hinsicht).Als auch für die mobile Ausgabe. Ich bin immer noch versuchen, herauszufinden, eine Möglichkeit, mit der Neuerstellung der Fehler auf einem mobilen Gerät (D. H. - in plunker), aber bisher erfolglos. Nicht ein
breaking
Thema für meine website, obwohl ich werde also vorwärts jetzt.Winkel 2 endgültige Lösung
Können wir die
@routeAnimation
built-in-Richtlinie um dies zu erreichen, wie pro meine Vorherige Antwort hier umfasst ein plunk.