Ich habe eine App, die im Prinzip so aussieht
%Vor% Nun wird die Fußzeile für alle verschiedenen Zustände der App gleich bleiben, aber die Kopfzeile wird sich in einigen Zuständen ändern, aber auch den Inhalt in vielen Zuständen teilen. Die einzige ui-view , die sich in allen Zuständen ändert, ist ui-view="main" .
Momentan sieht mein $stateProvider so aus (Fußzeile noch nicht implementiert):
So weit, so gut. Aber hier ist der Haken. Während der Übergänge möchte ich alle ui-view s als eins animieren. Um die Dinge in meinem Fall zusammenhängend aussehen zu lassen (es ist eine Überblendanimation), würde ich sie gerne in ein Wrapping-Div setzen und das Diving das Ein- / Ausblenden machen (das macht es auf jedem anderen ui-view wird alle Arten von Hässlichkeit verursachen ).
Was ist die beste Vorgehensweise in diesem Szenario?
Umschlinge ich sie in ui-view und hänge sie irgendwie in die $stateProvider ein (verschachtelte ui-view s?).
Gibt es andere Möglichkeiten, es zu tun? Kann ich $stateChange hören und Klassen auf meinen Wrapper anwenden wie ngAnimate mit einem ui-view ? (Ausblenden und dann warten, bis das Ergebnis vollständig ausgeblendet ist, bevor es eingeblendet wird.)
Aus meinen Google-Bemühungen scheint ui-view bei der Verarbeitung von Animationen des Übergangstyps vorzuziehen.
... Während der Übergänge möchte ich alle ui-Ansichten als eins animieren. Zu machen in meinem Fall sehen die Dinge zusammenhängend aus (es ist eine Fade-Animation), die ich gerne hätte um sie in ein Wrapping div zu legen und dieses div das Fade Out / Fade zu haben in (macht es auf jedem anderen ui-view wird alle Arten von verursachen Hässlichkeit).
Was ist die beste Vorgehensweise in diesem Szenario?
Option 1: Verwenden der Ereignis-Hooks $stateChangeStart und $stateChangeSuccess
Dieser Ansatz hätte einige Nebenwirkungen, wie @David in Kommentaren erwähnt. Vermeiden Sie es also, bis ui-router eine bessere Möglichkeit bietet, die Zustandsübergangsversprechen zu verwalten. Momentan ist es auf event.preventDefault() angewiesen, um den Übergang zu verhindern.
Grundsätzlich wird ui-router Ihre ui-view Route Change-Ansicht gleichzeitig mit dem eingehenden View-in auslösen. Was Sie erhalten, ist das vorherige ui-view , das immer noch sichtbar ist, während das nächste ui-view gerendert wird. Wenn Sie das View-Out animieren, wird es eine Übergangsdauer der Überlappung zwischen der alten und der neuen Ansicht geben. Sie sollten sich damit beschäftigen, die neue ui-view so lange zu rendern, bis der alte animiert ist (bevor Sie den neuen animieren)
Aus ähnlichen Gründen wäre es nicht klug, sie in ein anderes ui-view einzufügen und sie in $stateProvider einzuhängen.
Option 2: (Empfohlene) CSS-basierte Animationen
Ich gehe meistens mit CSS-basierten Übergängen und Sie können dies entweder durch
erreichenui-view und Anwenden der Animation auf diese Klasse. ui-view in einem <div> (falls Sie das wirklich brauchen) und wenden Sie eine Animation darauf an. In jedem Fall würden Sie alle ui-views als eine einzige Entität behandeln, und wenn Sie sie animieren würden, würden die Dinge kohärenter aussehen.
HTML:
%Vor%CSS:
%Vor% Hier ist eine funktionierende plankr basierend auf Ihrem Anwendungsfall, wo, ich habe eine abstract state root und drei verschachtelte states root.home , root.artist und root.band . Während ui-view='main' in allen Zuständen geändert wird, ändert sich ui-view='footer' in keiner und ui-view='header' ändert sich für den Status 'root.artist'.
Die Tatsache, dass Sie css-basierte .ng-enter und .ng-leave Klassen verwenden, um die Animationen auszulösen, überwinden Sie technisch die Probleme mit dem vorherigen Ansatz.
Tags und Links angularjs angular-ui-router transition ng-animate