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 %code% , die sich in allen Zuständen ändert, ist %code% .
Momentan sieht mein %code% so aus (Fußzeile noch nicht implementiert):
%Vor%So weit, so gut. Aber hier ist der Haken. Während der Übergänge möchte ich alle %code% 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 %code% wird alle Arten von Hässlichkeit verursachen ).
Was ist die beste Vorgehensweise in diesem Szenario?
Umschlinge ich sie in %code% und hänge sie irgendwie in die %code% ein (verschachtelte %code% s?). Gibt es andere Möglichkeiten, es zu tun? Kann ich %code% hören und Klassen auf meinen Wrapper anwenden wie %code% mit einem %code% ? (Ausblenden und dann warten, bis das Ergebnis vollständig ausgeblendet ist, bevor es eingeblendet wird.)
Aus meinen Google-Bemühungen scheint %code% 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 %code% und %code%
Dieser Ansatz hätte einige Nebenwirkungen, wie @David in Kommentaren erwähnt. Vermeiden Sie es also, bis %code% eine bessere Möglichkeit bietet, die Zustandsübergangsversprechen zu verwalten. Momentan ist es auf %code% angewiesen, um den Übergang zu verhindern.
Grundsätzlich wird %code% Ihre %code% Route Change-Ansicht gleichzeitig mit dem eingehenden View-in auslösen. Was Sie erhalten, ist das vorherige %code% , das immer noch sichtbar ist, während das nächste %code% 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 %code% einzufügen und sie in %code% einzuhängen.
Option 2: (Empfohlene) CSS-basierte Animationen
Ich gehe meistens mit CSS-basierten Übergängen und Sie können dies entweder durch
erreichenIn jedem Fall würden Sie alle %code% 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 %code% und drei verschachtelte states %code% , %code% und %code% . Während %code% in allen Zuständen geändert wird, ändert sich %code% in keiner und %code% ändert sich für den Status 'root.artist'. Die Tatsache, dass Sie css-basierte %code% und %code% Klassen verwenden, um die Animationen auszulösen, überwinden Sie technisch die Probleme mit dem vorherigen Ansatz.
%Vor%