3

我是 Angular 动画的新手，在使用动画转换路线视图时遇到问题。

我正在使用 ng-route 和 ng-animate。

假设我有三个视图：page1.html、page2.html 和 page3.html，它们显示在我的索引文件中，ng-view 取决于 url（/page1、/page2 和 /page3）。

现在，如果当前 url 是 /page1（并且显示了 page1.html），我知道如何使用 ng-enter 和 ng-leave 添加 CSS 类，以使页面之间的过渡效果很好。我遇到的问题是如何处理不同状态下的不同动画。

例如，如果我添加了所有的 CSS 规则，让 page1 在离开 url /page1 时向左滑出，而 page2 在输入 url /page2 时从右侧滑入，一切都很好。但是，如果我希望 page1 -> page3 之间的过渡将 page1 向下滑动而 page3 从顶部向下滑动呢？

这就是我想要的：

  • page1 -> page2（左滑效果）
  • page2 -> page1（右滑效果）
  • page1 -> page3（向下滑动效果）
  • page3 -> page1（上滑效果）
  • page2 -> page3（淡入效果）
  • page3 -> page2（淡入效果）

如您所见，我的动画取决于原始和目标 url/页面，而不仅仅是页面是进入还是离开。有什么办法可以做到这一点？

谢谢

4

1 回答 1

0

TL;DR：检查这个 plunkr。http://plnkr.co/edit/sIWfBnHww9EVi9TuphTv

使用 ngRoute 理论...

我这样做的方法是在 body 标签中添加一个 state 属性。为此，您需要在

angular.module('myapp', [])
.run(function($rootScope, $location){
  $rootScope.$route = $location;
})

.controller('MyCtrl', function($rootScope, $location){
   $rootScope.previousLocation;
   $rootScope.newLocation;
   $rootScope.$on('$routeChangeStart', function(){
     $rootScope.previousLocation = $location.path();
   })
   $rootScope.$on('$routeChangeSuccess', function(){
     $rootScope.newLocation = $location.path();
   })
})

然后在您的 HTML 中：

<body ng-controller="MyCtrl" new-location="{{ newLocation }}">

然而，这很糟糕，因为您的动画 CSS 选择器将类似于[new-location*="Books/view"] .ng-enter-active{}.

使用更高级的 ui.router

我建议使用ui-router来管理您的状态以使这更容易一些。由于所有状态都已命名，因此您可以附加当前状态：

angular.module('myapp', [])
.run(function($rootScope, $state){
   $rootScope.$state = $state;
})

<body state="{{ $state.current.name }}">

在这种情况下，您的 CSS 选择器动画将是这样的：

body[state="books.view"] [ui-view].ng-enter{}

抱歉……这有点胡说八道。有关工作示例，请参见 plunkr。

...看到这个 PLUNKR http://plnkr.co/edit/sIWfBnHww9EVi9TuphTv

于 2014-10-01T12:54:15.903 回答