首页 文章

有条件地动画ng视图过渡

提问于
浏览 次
2

我试图根据所涉及的视图将动画应用于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;}

虽然它有效，但我想知道是否有更简单的方法来做它，因为它似乎有点乱 .

javascript angularjs animation ng-animate

2 回答

  • 0

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

    $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>

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

    Edit ：新解决方案 .

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

    非常基本的服务示例：

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

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

    回复于
  • 6

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

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

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

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

    回复于

相关问题