向前和向后动画视图导航

Question

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

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

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

我发现的（少数几个）示例告诉我，只需将一个“后”类添加到视图中，并使用倒置动画将其移至另一个方向。这有效......但不是真的。

我所看到的是，“后退”课程仅适用于新视图，而不适用于旧版（ng-leave-ing）视图。

TL; DR：

• 我使用了错误的活动吗？是否有在创建第二个视图并在其中设置动画之前触发的事件，即$ locationChangeStart之前？
• 甚至可以用事件来做，或者我是否需要在导航事件上调用自定义助手？这将打破浏览器自己的历史记录功能，顺便说一句。
• 甚至可以在vanilla 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之后的空格）