javascript - Leave animation on ng-include with dynamic source - Stack Overflow

admin管理员组

文章数量:1323715

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 es 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?

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 es 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?

• javascript
• angularjs
• css-animations
• ng-animate
• angularjs-ng-include

Share Improve this question Follow edited Nov 14, 2013 at 16:50 JT703 asked Nov 14, 2013 at 16:24 JT703JT703 1,31144 gold badges1717 silver badges4242 bronze badges 4

• Which browser are you using? – Alex Filipovici Commented Nov 18, 2013 at 16:01
• What version of angularjs are you using? – pasine Commented Nov 18, 2013 at 16:03
• Chrome 31 and Angular 1.2 – JT703 Commented Nov 18, 2013 at 16:08
• Can you provide a plunker or fiddle? – erdimeola Commented Nov 18, 2013 at 16:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4 +50

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

Try using:

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

本文标签： javascriptLeave animation on nginclude with dynamic sourceStack Overflow