路线变化的两种不同动画

Question

我有以下情况:我在我的AngularJS应用程序中使用ui-router进行路由.在一个路线中,有五种子状态用于不同的子屏幕.我希望以类似旋转木马的方式为它们之间的过渡制作动画.

导航如下所示:

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

从导航state A到state B应该screen A滑出左,screen B从右边滑动; 反之亦然导航state B到state A.

什么工作是与所述屏幕转换transform: translateX(...);上enter,并leave在一个唯一的方向.

通常,我使用ng-class旗帜控制我的动画.但是,在这种情况下,在ui-view元素上设置类根本不起作用(Angular 1.2和ui-router 0.2还不完全兼容).也没有使用自定义指令设置它,scope.$on "$stateChangeStart"在转换开始后触发该指令.

我该如何实现所需的行为？

编辑:解决方案

为了记录:我最终使用自定义$scope函数实现它$state.go(),用于在更改路径之前确定方向.这可以避免$digest already in progress错误.确定动画的类被添加到ui-view父元素中; 这样可以ui-view在正确的方向上激活当前和未来.

控制器功能(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>

Answer 1

您可以通过设置控制器来专门执行此操作来控制视图中的类.然后,您可以订阅应用程序中的事件并更改页面动画的方式.

<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; 
        }
    });
});

我已经设置了一个codepen来演示http://codepen.io/ed_conolly/pen/aubKf

对于任何想要这样做的人请注意,由于Angular 1.2和UI路由器中动画的当前不兼容性,我必须使用ui.router.compat模块.