AngularJS v1.2 ngAnimate和ngView

Question

我想知道为什么这不像例外。只需尝试淡入/淡出/退出ng-view的内容。 css3动画做得不多。也许我的想法有误。

请查看Link（Plunker）

Answer 1

首先，在角度1.2中，不推荐使用ng-animate指令。你可以简单地把你想要的课程放在那里。所以我们创建了一个名为pageFade的类，它看起来像：

.pageFade.ng-enter, .pageFade.ng-leave{
 //transition styles
}

.pageFade.ng-enter{
 opacity: 0;
}
.pageFade.ng-enter-active{
 opacity:1;
}

.pageFade.ng-leave{
 opacity:1;
}
.pageFade.ng-leave-active{
 opacity:0;
}

然后，在视图中：

<div ng-view class="pageFade"></div>

Answer 2

好的，我想我已经明白了。 指令改变了。查看文档：

http://code.angularjs.org/1.2.0rc1/docs/api/ngAnimate

这是一个分叉的plunkr，演示：

http://plnkr.co/edit/MJZhZW2gCrTBE5XWWJEj?p=preview

Answer 3

对于那些可能有同样问题的人，我创建了一个简单的演示，说明ngView如何通过动画过渡。看看 demo project 。

简而言之，您基本上只需要使用ng-enter，ng-enter-active，ng-leave，ng-leave-active类在CSS中定义动画规则。还要记住在模块中包含ngAnimate依赖项。

希望它有所帮助。