3

大家好，

阅读这个谷歌组和从那里链接的小提琴和博客文章，我设法让页面转换与 ng-animate 一起工作。

这是我的小提琴

the fiddle is nicely commented, please let me know if anything's unclear

通过在 ng-view 上设置“transitionClass”（.LR 或 .RL），我能够为每个视图更改触发不同的 css 转换。

现在，我想要做的是手动应用“后退”转换，以防将视图更改为后退一步，无论该后退是由应用程序中的链接还是浏览器的后退按钮引起的。

为此，在 app.run() 中，我正在监听 $locationChangeStart，保存当前的 url slug，然后在下一个 $locationChangeStart 上检查它以确定我们是否要返回一页。如果是这种情况，则应用“后退”转换。

这工作得很好，除了...

进入页面 (.page-enter, .page-enter-active) 正在按预期转换，而离开页面 (.page-leave, .page-leave-active) 似乎卡在之前使用的转换上。

我希望，在ng-view上设置一个transitionClass'LR'，进入和离开的两个页面都使用'.LR page-enter'和'LR page-leave'的css转换。

似乎会发生什么：如果 transitionClass 之前是“ANY”，则 ng-animate 将使用“.LR page-enter”作为进入页面，使用“.ANY page-leave”作为离开页面。

重现“错误”：

应用程序从第 1 页开始。从 1 到 2。现在从 2 到 3，这个过渡被打破了。从 3 到 1，此转换按预期工作。两个转换都是“RL”（从右到左），所以它们看起来应该是一样的。唯一的区别是第 2 页输入“LR”，而第 3 页输入“RL”。所以，实际上，当从 2 变为 3 时，第 1 页将使用最初为第 3 页设置的“.enter-active”转换。

这是预期的行为吗？

我现在很困惑，但仅在上周左右使用 angular 并且 ng-animate 是相对较新的功能，我很可能会遗漏一些东西。因此，在报告错误或任何事情之前，我欢迎对此提出任何意见。

谢谢！

4

1 回答 1

2

好的，所以根据评论，我很确定您希望传入页面也确定退出动画以应用于传出页面。所以你真的需要你的 $locationChange 代码。

看起来您看到的问题是您在传入页面上独立地在父级上设置一个类，但没有什么可以让动画等待此类更改发生。

最简单的修复似乎是使 ng-animate 依赖于您更改的变量来确定动画类名称：

<ng-view ng-animate="transitionClass"></ng-view>

然后 CSS 选择器只是折叠成单个类：

.LR-enter-active {
  ...
}

（transitionClass 仍在 locationChangeStart 中的 $rootScope 上设置：）

 $rootScope.$on("$locationChangeStart", function (event, next, current) {
 ...

http://jsfiddle.net/9XPVX/4/

于 2013-07-27T13:51:57.643 回答