Leave animation on ng-include with dynamic source

Question

I have a ng-include which is loading content based on a dynamic url (working as expected).

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

The problem comes when I'm trying to animate the enter and leave of the content (according to the angular docs, those are the two events ng-include provides for animating on).

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

The enter is working as expected, but the leave is not. I am just seeing the content disappear immediately (not fade out) when the templateUrl is changed in my controller.

Any ideas?

Answer 1

I created this plunker with dynamic content, and it works fine.
Try to check it.
I think your problem could be related to the container or the position of the elements.
The initial code was taken from here. There you can find more details about animations in angularjs 1.2+.

Answer 2

Try using:

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