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?

Cyclic

Which browser are you using? – Asaasabi

What version of angularjs are you using? – Jugglery

Chrome 31 and Angular 1.2 – Cyclic

Can you provide a plunker or fiddle? – Crenulation

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+.

Jugglery

Answer 2

Try using:

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

Asaasabi

i've tried that. the enter animation is working fine, but the leave isn't. I believe the issue is tied to the fact that it's a dynamic source, not the css (since the enter animations working). – Cyclic