两种不同的动画来改变路线

一尘不染

两种不同的动画来改变路线

angularjs

我有以下情况：我在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朝着正确的方向对当前和未来进行动画处理。

控制器功能（脚本）：

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>

阅读 218

2020-07-04

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

2020-07-04