Doing animation with ng-show without ngAnimate

旧城冷巷雨未停 提交于 2019-12-13 01:26:53

问题


I want to do a wipe-in animation for my ng-show. Basically, I want to achieve this simple animation as shown in plunkr here.

I know that ngShow has a hook for ng-animate since angular 1.3. However, the situation is a bit complicated. I have a carousel that I extend using angular UI Carousel bootstrap. The bootstrap has a bug with Chrome, so ngAnimate needs to be disabled for all elements under the carousel tag. I need animation for element under my carousel, but if I include ngAnimate, my carousel won't work in Chrome -- as described in their github issue tracker here

As a workaround, I am thinking to do the animation using traditional CSS bootstrap to my ng-show inside my carousel. I did some research but I have no luck so far. Is this possible? And does anybody try this before? Thanks so much!


回答1:


You can use the ng-class directive instead of ng-show and ng-hide which will conditionally add class to the element that should wipe-in, invoking the desired transition, giving basically the same effect and omitting entirely the ngAnimate module. Here's a plunker showing the implementation.



来源:https://stackoverflow.com/questions/29323044/doing-animation-with-ng-show-without-nganimate

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!