Leave animation on ng-include with dynamic source

Question

I have ng-include which loads content based on a dynamic url (works as expected).

<ng-include class="my-content-area" src="templateUrl"></ng-include> 

The problem occurs when I try to animate the enter and leave content (according to the angular docs, these are two events that ng-include provides for the animation).

 .my-content-area.ng-enter, .my-content-area.ng-leave { transition: all 500ms; } .my-content-area.ng-enter { opacity:0; } .my-content-area.ng-enter.ng-enter-active { opacity:1; } .my-content-area.ng-leave { opacity:1; } .my-content-area.ng-leave.ng-leave-active { opacity:0; } 

enter works as expected, but leave does not. I just see that the content disappears right away (doesn't disappear) when templateUrl changes in my controller.

Any ideas?

Answer 1

I created this plunker with dynamic content and it works great.
Try to check it out.
I think your problem might be with the container or with the position of the elements.
The source code was taken here . There you can find more information about animations in angularjs 1.2 +.

Answer 2

Try using:

 .my-content-area.ng-leave { -webkit-transition: all 500ms; /* Safari/Chrome */ transition: all 500ms; }