Ich verwende ng-animate , um die App-Ansichten zu verschieben, damit jede Route die eigene Ansicht verschiebt. Dies ist mein einfacher Code:
html:
%Vor%css:
%Vor% Nun, ich frage mich, is there anyway to exclude the home page (main "/" route) from sliding?
Mit anderen Worten: Gibt es eine Möglichkeit, eine Route von ng-animate auszuschließen?
Dafür steht ng-class .
Sie können eine anwendungsweite Variable $ rootScope.path immer dann setzen, wenn sich der Pfad ändert.
%Vor%Dann entscheiden Sie, Ihre Animationsklasse anhand dieser Variablen festzulegen
Wenn Sie die Klasse slide nur dann setzen möchten, wenn der Pfad nicht / ist, dann mögen Sie dies
Auf diese Weise müssen Sie Ihren Controller nicht berühren.
Vollständige Demo ist hier, Ссылка
Übrigens verwendet dies Johannisbeere angularJS Version, 1.2.7
------- Bearbeiten (nach Besuch der Hauptseite animieren) ------
%Vor%und
%Vor% Sie müssen keinen separaten Controller, keine Richtlinie erstellen oder Geschäftslogik ändern. Verwenden Sie einfach die Methode .animation , um bedingte Animation zu .slide hinzuzufügen.
Hören Sie $routeChangeSuccess event auf $rootScope . Dieses Ereignis wird vor dem Start der Animation ausgelöst. Sie haben also Zeit, toRoot und fromRoot flag entsprechend zu setzen. Wenn die Zielansicht keine "/" -Ansicht ist, wird% enable-animation -Klasse zu ng-view element hinzugefügt, so dass css-Übergang definiert wird.
Wenn die Zielansicht eine "/" Ansicht anzeigt, wird keine Animation ausgeführt.
HTML
%Vor%CSS
%Vor%JavaScript
%Vor%Wenn Sie eine Route nur beim ersten Laden der App ausschließen möchten, müssen Sie im Grunde nichts tun. Definieren Sie einfach Ihre CSS-Animation wie gewohnt. Die erste geladene Route wird keine Animation auslösen.
Warum fügst du nicht einfach eine Root-Klasse wie class="not-animated" und class="animated" zu den Controllern hinzu, die nicht animiert werden sollen oder wollen?
Auf diese Weise können Sie mit der Klasse .not-animated und .animated mit Ihrer Animation auf verschiedenen Controllern spielen.
Sie können Ihren Controller wie folgt einstellen:
%Vor%Dies führt zu:
%Vor%Sie können einen Controller erstellen, der auf Routenänderungen wartet und eine Klasse entsprechend einstellt. Sie können dann die richtige Animation mit CSS ausrichten.
%Vor%Bitte beachten Sie, dass $ routeChangeStart für neuere Versionen von angular in $ locationChangeStart geändert wurde.
Ich habe eine andere ähnliche Frage hier beantwortet Zwei verschiedene Animationen für die Route Änderungen
Eine Möglichkeit, eine bestimmte Route von der Animation auszuschließen, besteht darin, einen JS-Animations-Wrapper zu verwenden, der die Einstellung der Animationsklasse für ng-view übernimmt. Sie benötigen eine zusätzliche Klasse, um das nicht animierte ng-leave zu verarbeiten, wenn Sie zur nicht animierten Route zurückkehren.
Hier ist ein Beispiel-JS-Wrapper, der nach einem benutzerdefinierten animate -Attribut in Ihrer Route sucht, um zu entscheiden, ob eine Route animiert ist oder nicht:
Hier ist der funktionierende Plünderer:
Ссылка
Soweit ich Sie verstehe, möchten Sie, dass keine Animation stattfindet, wenn der Nutzer Ihre Website besucht. Aber danach sollten die Animationen die ganze Zeit passieren. Dies ist die kürzeste Lösung, die ich kenne:
Verwenden Sie das Modul run , um alle Animationen zu deaktivieren:
In Ihrem Controller, der an / gebunden ist, aktivieren Sie die Animationen, aber für einen Digest-Zyklus verzögert:
Tags und Links javascript angularjs css ng-animate slide