我有以下情况：我在我的AngularJS应用程序中使用ui-router进行路由选择。在一条路线中，有五个子状态用于不同的子屏幕。我想以一个类似转盘的方式动画化这些转换。
导航如下所示：
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>
您可以通过设置控制器来专门控制您的视图上的类。然后，您可以订阅应用程序中的活动，并更改页面动画的方式。
原文链接：https://www.f2er.com/angularjs/144881.html<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;
}
});
});
我已经设立了一个代号，以示范这里http://codepen.io/ed_conolly/pen/aubKf
对于任何试图这样做的人，请注意，由于目前与Angular 1.2和UI Router中的动画不兼容，我不得不使用ui.router.compat模块。
