动画视图导航向前和向后

Question

所以，Angular 1.2 具有完整的 ng-animate 支持，我一直在使用它进行页面转换 - 初始设置非常简单，非常棒。正向动画（从左到右），没问题。向后导航？问题。

理论上它是可行的：例如，参见http://codepen.io/ed_conolly/pen/aubKf。但是，我正在尝试使其适用于导航事件；例如，$locationChangeStart。

我观察到的是，当启动页面转换时，Angular 会创建第二个“ng-view”div，然后将 .ng-leave 类应用于旧的，将 .ng-enter 应用于新的.

我发现的（少数）示例告诉我只需将“返回”类添加到带有倒置动画的视图中，让它走另一条路。这行得通……但不是真的。

我看到的是，'back' 类仅应用于 new 视图，而不是旧的（ng-leave-ing）视图。

tl;博士：

• 我是否使用了错误的事件？是否有在第二个视图创建和动画之前触发的事件，即在 $locationChangeStart 之前？
• 甚至可以通过事件来实现，还是我需要在导航事件上调用自定义助手？顺便说一句，这会破坏浏览器自己的历史功能。
• 甚至可以在原版 Angular 中执行此操作，还是我需要 angular-ui？

Answer 1

我看不出您的示例有什么问题：动画似乎运行良好，无论是点击还是使用浏览器前进/后退。我在 Chrome 上，如果这有什么不同的话。

但是，对于将哪些类添加到哪个 ui-view 的任何问题的解决方法，您可以将“back”类添加到视图的父 div（在您的示例中，具有类 viewWrap 的 div） ，并在 CSS 选择器中指定动画。所以不是

.back.container.ng-enter {
  -webkit-transform: translate3d(-100%, 0, 0);
}

你会的

.back .container.ng-enter {
  -webkit-transform: translate3d(-100%, 0, 0);
}

（注意.back后面的空格）