AngularJS v1.2 ngAnimate和ngView

Question

i'm wondering why this does not work like excepted. Simply try to fade/in/out the content of the ng-view. Not done much with css3 animations. Maybe there is a mistake in my thoughts.

Please check out this Link (Plunker)

Answer 1

First off, in angular 1.2 the ng-animate directive is deprecated. You can simply put the class you want on there. So we make a class called pageFade that looks like:

.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;
}

Then, in the view:

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

Answer 2

Ok, I think I figured it out. The directive changed. Check the docs here:

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

Here is a forked plunkr that demonstrates:

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

Answer 3

To those who may have the same question I created a simple demonstration of how ngView can transition with animations. Check out this demo project .

In short you basically only need to define animation rules in CSS using ng-enter , ng-enter-active , ng-leave , ng-leave-active classes. Also remember to include ngAnimate dependency to your module.

Hope it helps someone.