Mam następujący przypadek: używam routera ui do routingu w mojej aplikacji AngularJS. W jednej z tras istnieje pięć stanów podrzędnych dla różnych pod-ekranów. Chcę animować przejście między nimi w sposób przypominający karuzelę.

Nawigacja wygląda tak:

Link to A | Link to B | Link to C | Link to D | Link to E

Nawigacja odstate A dostate B powinienemscreen A wysuń w lewo iscreen B wsuń z prawej strony; odwrotnie do nawigacji zstate B dostate A.

Czym jest animacja przejścia ekranu za pomocątransform: translateX(...); naenter ileave wjeden tylko kierunek.

Zazwyczaj kontroluję swoje animacje za pomocąng-class z flagą. W tym przypadku jednak ustawienie klasy naui-view element w ogóle nie działa (Angular 1.2 i ui-router 0.2 nie są jeszcze w pełni kompatybilne). Nie działa też z ustawianiem go na niestandardową dyrektywęscope.$on "$stateChangeStart" który został zwolniony po rozpoczęciu transformacji.

Jak mogę wdrożyć pożądane zachowanie?

Edytuj: rozwiązanie

Dla przypomnienia: skończyłem wdrażając go za pomocą zwyczaju$scope funkcja za pomocą$state.go() aby określić kierunek przed zmianą trasy. Pozwala to uniknąć$digest already in progress błędy. Klasa określająca animację jest dodawana doui-viewelement macierzysty; to ożywia zarówno prąd, jak i przyszłośćui-view we właściwym kierunku.

Funkcja kontrolera (Coffeescript):

go: (entry) ->
  fromIdx = ...
  toIdx = ...

  if fromIdx > toIdx
    $scope.back = false
  else
    $scope.back = true

  $state.go entry

Szablon:

<div ng-class="{toLeft: back}">
  <div ui-view></div>
</div>