Question

我正在尝试将动画应用于ng-view（路由），具体取决于所涉及的视图。

例如，从View1到View2，我需要View1从左侧离开，View1从右侧进入。否则，从View2到View1，我需要View2从右侧离开，View1从左侧进入。

但是我还需要在两个视图中应用不同的动画，例如，View1会逐渐消失，而View2会进行缩放。

我正在做的是在ng-view中使用范围相关变量作为类：

<div ng-view class="{{transition}}"></div>

在每个路径更改中设置此变量，并在每个控制器中使用类似的内容：

$scope.transition=Global.transition;

$rootScope.$on("$routeChangeStart",function (event, current, previous) {
   // Here I get the leaving view and the entering view and the kind of transition is selected
   ...
   $scope.transition=selectedLeavingTransition;  // Set the transition for the leaving view
   Global.transition=selectedEnteringTransition; // Set the transition for the entering view
});

Global是一项服务，用于为离开范围设置输入范围的转换变量。

这样，当检测到路径更改时，使用与selectedLeavingTransition关联的类设置当前ng-view，并使用与selectedEnteringTransition关联的类设置输入ng-view。

例如，如果路线更改是从View1到View2，则动画期间的ng视图可能是：

<div ng-view class="fadeOut ng-animate ng-leave ng-leave-active"></div>
<div ng-view class="scaleUp ng-animate ng-enter ng-enter-active"></div>

这种情况下的CSS可能是：

fadeOut.ng-leave {animation:1s fadeOut;}
scaleUp.ng-enter {animation:1s scaleUp;}

虽然它有效，但我想知道是否有一种更简单的方法可以做到这一点，因为它看起来有点乱。

Answer 1

不需要太多代码的替代解决方案是在您的路线上定义动画：

$routeProvider.when('/view1', {
  templateUrl: 'view1.html',
  controller: 'View1Controller',
  animations: {
    enter: 'enter-left',
    leave: 'leave-left'
  }
});

然后使用指令检索当前路径的动画并将它们添加到元素中：

app.directive('viewAnimations', function ($route) {
  return {
    restrict: 'A',
    link: function (scope, element) {
      var animations = $route.current.animations;
      if (!animations) return;

      if (animations.enter) element.addClass(animations.enter);
      if (animations.leave) element.addClass(animations.leave);
    }
  };
});

将指令放在包含ngView指令的元素上：

<body ng-view view-animations></body>

演示：http://plnkr.co/edit/Y3ExDyiPIJwvVKO4njBT?p=preview

修改：新解决方案。

要在运行期间设置动画，我会像你一样使用服务，但是使用指令来应用它们。

非常基本的服务示例：

app.factory('viewAnimationsService', function ($rootScope) {

  var enterAnimation;

  var getEnterAnimation = function () {
    return enterAnimation;
  };

  var setEnterAnimation = function (animation) {
    enterAnimation = animation;
  };

  var setLeaveAnimation = function (animation) {
    $rootScope.$emit('event:newLeaveAnimation', animation);
  };

  return {
    getEnterAnimation: getEnterAnimation,
    setEnterAnimation: setEnterAnimation,
    setLeaveAnimation: setLeaveAnimation
  };
});

指令：

app.directive('viewAnimations', function (viewAnimationsService, $rootScope) {
  return {
    restrict: 'A',
    link: function (scope, element) {

      var previousEnter, previousLeave;

      var enterAnimation = viewAnimationsService.getEnterAnimation();
      if (enterAnimation) {
        if (previousEnter) element.removeClass(previousEnter);
        previousEnter = enterAnimation;
        element.addClass(enterAnimation);
      }

      $rootScope.$on('event:newLeaveAnimation', function (event, leaveAnimation) {
        if (previousLeave) element.removeClass(previousLeave);
        previousLeave = leaveAnimation;
        element.addClass(leaveAnimation);
      });
    }
  };
});

演示：http://plnkr.co/edit/DuQXaN2eYgtZ725Zqzeu?p=preview

Answer 2

我一直在努力，我有一个更整洁的解决方案，我正在做的有一些问题。现在我只是在根范围内使用$ routeChangeStart并在那里选择离开并输入转换。

我唯一的问题是在routeChangeStart事件中我无法修改离开视图，所以我无法建立到ngView元素类属性的离开过渡。我必须直接通过DOM设置它（我知道这是不好的做法）。

我尝试通过共享服务修改离开视图，根范围和$apply()但没有一个工作。启动routeChangeStart事件后，视图似乎是静态的。

以下是一个工作示例：jsfiddle.net/isidrogarcia/Fs5NZ

有条件地动画ng视图过渡

2 个答案: