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

Question

我有以下情况:我在 AngularJS 应用程序中使用 ui-router 进行路由。在一条 route ，不同的子屏幕有五个子状态。我想以类似轮播的方式为它们之间的过渡设置动画。

导航如下所示:

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

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

有效的方法是在 中的 enter 和 leave 上使用 transform:translateX(...); 对屏幕转换进行动画处理仅一个方向。

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

如何实现所需的行为？

编辑:解决方案

郑重声明:我最终使用自定义 $scope 函数来实现它，并使用 $state.go() 在更改路线之前确定方向。这可以避免 $digest has in Progress 错误。确定动画的类被添加到 ui-view 的父元素中；这会以正确的方向对当前和 future 的 ui-view 进行动画处理。

Controller 功能(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

您可以通过设置 Controller 来专门控制 View 上的类。然后，您可以订阅应用内的事件并更改页面动画的方式。

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

然后在你的 Controller 内

.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 Router 中的动画当前不兼容，我不得不使用 ui.router.compat 模块。