Angularjs 中视图之间的平移动画

Question

我正在构建一个 AngularJS 应用程序，并希望用动画做一些有点棘手的事情，我不太确定该怎么做。该应用程序的一个方面需要以平移方式在视图之间制作动画，但需要保持单个视图的外观。例如，如果有一个中心有一个正方形的场景，那么在视图更改时，该正方形似乎会离开屏幕，就好像我们正在平移（而其他元素进入），没有它感觉就像视图真的改变了。

我知道ng-animate 提供了许多强大的动画功能，但我不知道在它们之间转换时保持单个视图外观的最佳方法是什么。

有没有人有尝试这样做的经验或知道可以使这成为可能的动画库？

我会在找到可能的解决方案后更新这个问题。

Answer 1

添加视图时，会添加以下类：

 .ng-enter
 .ng-enter.ng-enter-active

当视图被移除时，会添加以下类：

 .ng-leave
 .ng-leave.ng-leave-active

您可以将 CSS 3 过渡样式附加到类以实现您想要的动画效果。

如果我理解正确，“离开”动画应该从 0px 偏移量开始从左向右平移并淡出。 “进入”动画也应该从负偏移开始从左向右平移，但淡入。

这是一个例子：

Plunker Demo
JS FIddle Demo