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 :).
InformationsquelleAutor Sammy S. | 2013-11-20
Schreibe einen Kommentar