javascript - AngularJS v1.2 ngAnimate 和 ngView

Question

我想知道为什么这不像例外那样工作。只需尝试淡入/淡出 ng-view 的内容。对css3动画没有做太多。也许我的想法有错误。

请查看此链接（Plunker）

Answer 1

首先，在 Angular 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使用动画进行过渡。看看这个演示项目。

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

希望它可以帮助某人。