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?
Share Improve this question edited Nov 14, 2013 at 16:50 JT703 asked Nov 14, 2013 at 16:24 JT703JT703 1,3114 gold badges17 silver badges42 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
2 Answers
Reset to default 4 +50I 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
版权声明:本文标题:javascript - Leave animation on ng-include with dynamic source - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742125502a2421920.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论