我是新来的角动画，我在动画中转换路径视图时遇到问题。角度动画视图转换取决于来源和目标

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

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

现在，如果当前网址是/ page1（并显示page1.html），我知道如何使用ng-enter和ng-leave添加CSS类，以使页面之间的转换良好地动画。我遇到的麻烦是如何处理不同状态下的不同动画。

例如，如果我添加所有CSS规则以使页面1向左滑动时离开url/page1和page2从右侧滑入输入url/page2时，一切都很好。但是如果我希望页面1 - >页面3之间的过渡将页面1向下滑动并且页面3从顶部向下滑动呢？

这就是我想要的有：

1页 - >第2页（向左滑动效果）
第2页 - >第1页（向右滑动效果）
1页 - >第3页（向下滑动效果）
PAGE3 - >第1页（向上滑动效应）
第2页 - >第3页（在效果褪色）
PAGE3 - >第2页（在效果褪色）

正如您所看到的，我的动画取决于来源和目标网址/页面，而不仅仅是页面正在进入或离开。有什么办法可以做到这一点？

谢谢

来源

2014-09-22 Lucas Wiener

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

使用ngRoute理论...

我做的方式，是通过添加状态属性body标签。对于这一点，你需要$航线上提供

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 }}">

然而，这吮吸B * LLS为你的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{}

对不起......这一切都有点jibberish 。查看plunkr的工作示例。

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

来源

2014-10-01 12:54:15 harelpls

嗨，谢谢你的回复。我也可以通过ngRoute示例中提供的类似方法知道我的应用程序在哪个状态。但是，我觉得你的答案缺乏一件事情：根据它从哪个状态转换，能够具有不同的ng-enter，例如“books.view”。 TLDR：我需要根据以前的状态和新状态制作CSS动画，而不仅仅是当前状态。我更新了你的plunkr以显示我想要的东西：http://plnkr.co/edit/y6qL5tGyM4lh0PfR1fAc 我希望你明白我想要的东西:) – 2014-10-03 07:13:35

角度动画视图转换取决于来源和目标

回答

使用ngRoute理论...

使用远远优于ui.router

相关问题