在Angularjs中查看视图之间的动画

时间:2014-06-12 22:40:09

标签: javascript angularjs animation ng-animate

我正在构建一个AngularJS应用程序,我希望用动画做一些有点棘手的事情,我不太确定该怎么做。应用程序的一个方面需要以平移方式在视图之间动画,但需要保持单个视图的外观。例如,如果在中心有一个正方形的场景,那么在视图变化时该正方形看起来会像我们正在平移一样(当其他元素进入时),所有没有感觉就像视图真的一样改变。

我知道ng-animate提供了很多强大的动画功能,但是我很难理解在它们之间进行转换时保持单个视图外观的最佳方法。

有没有人有尝试这样做的经验或知道可以实现这一目标的动画库?

我会在找到它们时用可能的解决方案更新这个问题。

1 个答案:

答案 0 :(得分:1)

添加视图时,会添加以下类:

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

删除视图后,将添加以下类:

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

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

如果我理解正确,那么离开'动画应从左向右平移,淡出,从0px偏移开始。进入'动画也应该从左到右平移,但是从负偏移开始淡入。

以下是一个例子:

Plunker Demo
JS FIddle Demo