使用ngRoute理论......

Question

我是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规则，以便在输入url / page2时离开url / page1和page2从右侧滑入时向左滑动page1，一切都很好。但是，如果我想要在page1 - ＆gt;之间进行转换，该怎么办？第3页将第1页向下滑动，第3页从顶部向下滑动？

这就是我想要的：

第1页 - ＆gt;第2页（左侧滑动效果）
第2页 - ＆gt;第1页（右侧滑动效果）
第1页 - ＆gt;第3页（向下滑动效果）
第3页 - ＆gt; page1（向上滑动效果）
第2页 - ＆gt;第3页（淡入效果）
第3页 - ＆gt;第2页（淡入效果）

正如您所看到的，我的动画取决于原点和目标网址/页面，而不仅仅是页面是进入还是离开。有没有办法实现这个目标？

由于

Answer 1

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

使用ngRoute理论......

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

上提供$ route

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

角度动画视图根据原点和目的地进行过渡

1 个答案:

使用ngRoute理论......

使用更好的ui.router