angularjs – 两种不同的路线变化动画

导航如下所示：

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

从状态A导航到状态B应使屏幕A向左滑动，屏幕B从右侧滑入;从状态B导航到状态A反之亦然。

工作是通过transform转换屏幕转换：translateX(…);仅在一个方向进入和离开。

通常，我使用带有标志的ng-class来控制我的动画。然而，在这种情况下，在ui-view元素上设置一个类根本不起作用(Angular 1.2和ui-router 0.2还不完全兼容)。它也不会使用自定义指令监听范围。$ on“$ stateChangeStart”，在转换开始后被触发。

如何实现所需的行为？

编辑：解决方案

为了记录：我最终使用$ state.go()定制$ scope函数来确定改变路由前的方向。这避免了$ digest已经在进行中的错误。确定动画的类被添加到ui-view的父元素中;这使得当前和未来的ui视图在正确的方向上动画化。

控制器功能(Coffeescript)：

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

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

  $state.go entry

模板：

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

<div class="viewWrap" ng-controller="viewCtrl">
  <div class="container" ui-view ng-class="{BACk: BACk}"></div>
</div>

.controller('viewCtrl',function ($scope) {
    $scope.$on('$stateChangesuccess',function (event,toStatE) {
        if (toState.name === 'state1') {
            $scope.BACk = true; 
        } else {
            $scope.BACk = false; 
        }
    });
});