Eu tenho o seguinte caso: Estou usando o roteador-ui para o roteamento no meu aplicativo AngularJS. Em uma rota, há cinco estados filho para subtelas diferentes. Eu quero animar a transição entre estes de uma maneira carrossel.

A navegação é assim:

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

Navegando destate A parastate B deve fazerscreen A deslize para a esquerda escreen B deslize da direita; vice-versa para navegar destate B parastate A.

O que funciona é animar as transições de tela comtransform: translateX(...); ementer eleave em1 apenas direção.

Normalmente, eu controlo minhas animações usandong-class com uma bandeira. Neste caso, no entanto, definir uma classe noui-view elemento não funciona de todo (Angular 1.2 e ui-roteador 0.2 não são totalmente compatíveis ainda). Também não está funcionando com a configuração de uma diretiva personalizada para ouvirscope.$on "$stateChangeStart" que é disparado após a transição ter começado.

Como posso implementar o comportamento desejado?

Edit: A solução

Para o registro: acabei implementando-o usando um costume$scope função usando$state.go() para determinar a direção antes de alterar a rota. Isso evita$digest already in progress erros. A classe que determina a animação é adicionada aoui-viewo elemento pai; isso anima tanto o atual como o futuroui-view na direção correta.

Função de 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>