2

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

从理论上讲，它只是有效：例如，请参阅http://codepen.io/ed_conolly/pen/aubKf。但是，我正在尝试使其适用于导航事件；例如，$locationChangeStart。

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

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

我所看到的是“返回”类仅应用于新视图，而不是旧（ng-leave-ing）视图。

tl;博士：

  • 我使用了错误的事件吗？是否有在第二个视图被创建和动画之前触发的事件，即在 $locationChangeStart 之前？
  • 甚至可以通过事件来完成，还是我需要在导航事件上调用自定义助手？顺便说一句，这会破坏浏览器自己的历史功能。
  • 甚至可以在香草Angular中做到这一点，还是我需要angular-ui？
4

1 回答 1

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）

于 2013-12-24T07:07:53.923 回答