Question

我想在页面之间制作幻灯片动画。我从右到左制作了基本的幻灯片动画，如下所示：AngularJS animation examples

但是对于不同的路线，我想要不同的动画（从右到左，或从左到右）。我找到了旧版angularjs的一些解决方案。我认为现在必须有一种简单的方法，当动画是角度的一部分时。我在哪里可以找到一些例子？

Answer 1

为每个指定要使用的动画类的路径添加自定义属性：

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

$routeProvider.when('/view2', {
  templateUrl: 'view2.html',
  controller: 'View2Controller',
  animation: 'from-right'
});

然后添加一个指令，该指令检索当前路线的动画并将其添加到元素：

app.directive('viewAnimation', function ($route) {
  return {
    restrict: 'A',
    link: function (scope, element) {
      var animation = $route.current.animation;
      if (animation) element.addClass(animation);
    }
  };
});

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

<body ng-view view-animation></body>

根据您的使用情况，可能需要进行一些调整，但希望这是一个良好的开端。

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

AngularJS中不同路径上的不同动画

1 个答案: