Zwei verschiedene Animationen für die route ändert
Ich habe folgenden Fall: ich bin mit dem ui-router für das routing in meinem AngularJS-Anwendung. In einer route gibt es fünf untergeordneten Staaten für die unterschiedlichen subscreens. Ich möchte animieren den übergang zwischen diesen in einem Karussell-ähnlichen Weise.
Die navigation sieht wie folgt aus:
Link to A | Link to B | Link to C | Link to D | Link to E
Navigation von state A
zu state B
sollte screen A
slide-out auf der linken und screen B
Folie von der rechten; Umgekehrt ist für die Navigation von state B
zu state A
.
Was funktioniert ist die Animation der Bildschirm übergänge mit transform: translateX(...);
auf enter
und leave
im eine Richtung.
Normalerweise kontrolliere ich meine Animationen mit ng-class
mit einer fahne. In diesem Fall, jedoch, die Einstellung auf Klasse ui-view
element funktioniert überhaupt nicht (Angular 1.2 und ui-router 0.2 sind nicht vollständig kompatibel noch). Weder funktioniert es mit der Einstellung ist es mit einer benutzerdefinierten Richtlinie hören scope.$on "$stateChangeStart"
die ausgelöst wird, nachdem der übergang hat begonnen.
Wie kann ich realisieren das gewünschte Verhalten?
Edit: Die Lösung
Für das Protokoll: ich landete Umsetzung unter Verwendung eines benutzerdefinierten $scope
Funktion mit $state.go()
um die Richtung zu bestimmen, bevor die änderung der route. Dies vermeidet die $digest already in progress
Fehler. Die Klasse bestimmen, die animation wird Hinzugefügt, um die ui-view
's parent-element; diese belebt sowohl die aktuellen als auch die zukünftigen ui-view
in die richtige Richtung.
Controller-Funktion (Coffeescript):
go: (entry) ->
fromIdx = ...
toIdx = ...
if fromIdx > toIdx
$scope.back = false
else
$scope.back = true
$state.go entry
Vorlage:
<div ng-class="{toLeft: back}">
<div ui-view></div>
</div>
- Konnte Sie nicht verwenden, die javascript-basierte Animations-Variante von ng-animate, innerhalb derer Sie überprüfen können, von wo bis wo Sie animieren möchten, und damit eine andere animation basierend auf der Richtung?
- Wenn Sie eine Idee haben, wie es zu implementieren, fühlen Sie sich frei, um eine sich selbst beantworten :).
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie die Klassen auf die Ansicht nach dem einrichten einer Steuerung zu tun, dass speziell. Sie können dann registrieren Sie sich auf Ereignisse innerhalb der app und die Weise ändern, die die Seite belebt.
Dann in Ihrem controller
Ich habe ein codepen zu demonstrieren, hier http://codepen.io/ed_conolly/pen/aubKf
Für jeden Versuch, dies zu tun bitte beachten Sie, dass ich hatte, die Benutzeroberfläche zu verwenden.router.compat Modul aufgrund der aktuellen Inkompatibilität der Animationen in Eckigen 1.2 und UI Router.
$locationChangeStart
. +1 für die nette codepen.Success
nützlich ist, wie wir wissen, hat das system akzeptiert die route ändern zu diesem Zeitpunkt.$digest already in progress
Nachrichten die ganze Zeit. Außerdemui-view
entfernt werden, ist halten die alte Klasse, während die neue Ansicht wird ein anderes. Dies führt zu einer sehr seltsamen Effekt, wo das verlassen der Ansicht animiert in die falsche Richtung, während der Eingabe anzeigen, animiert, in die richtige Richtung überlagerung der verlassen.ui.router
verwenden Sie?$scope
Funktion mit$state.go
um die Richtung zu bestimmen, bevor ändern der route. Dies vermeidet die$digest already in progress
Fehler. Die Klasse bestimmen, die animation wird Hinzugefügt, um dieui-view
's Eltern-element.Konnte man immer Kasse die Winkel-1.2-Zweig: https://github.com/angular-ui/ui-router/tree/angular-1.2. Dieser behebt ngAnimate zusammen mit ein paar anderen Dingen.
Ich glaube, das werden Sie im ui-router 0.3.0, so lange, wie Sie nicht drängen bald live, das sollte Ihnen mit der Funktion, die Sie brauchen, bis Sie wieder auf die "stable" - Zweig.
Disclaimer: ich habe keine Autorität, wenn die nächste Version von UI-router oder was es beinhalten wird. Ich habe schlicht und einfach diese Informationen in verschiedenen Themen, die auf der github-Seite.
Eddiec die Lösung war ein wirklich schöner start, aber ich immer noch fand mich hacken es ein wenig. Hier ist eine modifizierte controller, der funktioniert besser für meine Zwecke. Dies ist mehr Dynamik:
War ich versucht zu tun die gleiche Sache mit
ngRoute
mit$routeChangeSuccess
aber das problem, das ich gestoßen bin, war, dass dieng-leave
animation starten würde, bevor eine digest-Zyklus ran. Die enter-animation war immer korrekt, aber die lassen die animation war immer der Vorherige.Die Lösung, die für mich gearbeitet (Winkel-1.57) wurde zum wickeln des
$location.path()
Aufruf in einer$timeout
. Dies stellt sicher, dass eine vollständige digest ausgeführt wird, bevor die animation gestartet wird.Ähnlichen Versuch @eddiec die akzeptierte Antwort. Im Grunde ein array der name des Landes-Werte und dann die position im array die Namen der toState-und fromState-Werte werden verglichen, um die Richtung zu bestimmen.
Codepen, Gabel, von oben, zeigt die Arbeits-Ergebnis.
http://codepen.io/anon/pen/zBQERW