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?

Which browser are you using? – Alex Filipovici Nov 18 '13 at 16:01 — Alex Filipovici, Nov 18 '13 at 16:01
What version of angularjs are you using? – pasine Nov 18 '13 at 16:03 — pasine, Nov 18 '13 at 16:03
Can you provide a plunker or fiddle? – erdimeola Nov 18 '13 at 16:08 — erdimeola, Nov 18 '13 at 16:08

pasine · Accepted Answer · 2013-11-18T17:14:13.803

4

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

edited Nov 18 '13 at 17:14

answered Nov 18 '13 at 17:07

pasine

11,311
10
49
81

score 1 · Answer 2 · answered Nov 18 '13 at 16:10

1

Try using:

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

answered Nov 18 '13 at 16:10

Alex Filipovici

31,789
6
54
78

1

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). – JT703 Nov 18 '13 at 16:16

Leave animation on ng-include with dynamic source

2 Answers2