Tengo el siguiente caso: Estoy usando el enrutador ui para el enrutamiento en mi aplicación AngularJS. En una ruta, hay cinco estados secundarios para diferentes subpantallas. Quiero animar la transición entre estos de manera similar a un carrusel.

La navegación se ve así:

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

Navegando desdestate A astate B debería hacerscreen A deslice hacia la izquierda yscreen B deslice hacia adentro desde la derecha; viceversa para navegar desdestate B astate A.

Lo que funciona es animar las transiciones de pantalla contransform: translateX(...); enenter yleave enuno solo direccion

Por lo general, controlo mis animaciones usandong-class con una bandera. En este caso, sin embargo, establecer una clase en elui-view element no funciona en absoluto (Angular 1.2 y ui-router 0.2 aún no son completamente compatibles). Tampoco se trata de configurarlo con una directiva personalizada de escucha.scope.$on "$stateChangeStart" que se dispara una vez iniciada la transición.

¿Cómo puedo implementar el comportamiento deseado?

Edit: La solución

Para el registro: terminé implementándolo usando una costumbre.$scope función usando$state.go() Para determinar la dirección antes de cambiar la ruta. Esto evita la$digest already in progress errores La clase que determina la animación se agrega a laui-viewel elemento padre; Esto anima tanto la corriente como el futuro.ui-view en la direccion correcta

Función del controlador (Coffeescript):

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

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

  $state.go entry

Modelo:

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