在不使用ngAnimate的情况下使用ng-show制作动画 [英] Doing animation with ng-show without ngAnimate

问题描述

我想为我的ng-show做一个可擦式动画.基本上，我想实现这种简单的动画，如 plunkr 所示.

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.

我知道ngShow自角度1.3起就有一个用于ng-animate的钩子.但是，情况有点复杂.我有一个使用角度UI Carousel引导程序扩展的轮播.该引导程序在Chrome中存在一个错误，因此需要为carousel标记下的所有元素禁用ngAnimate.我需要在转盘下的元素添加动画，但是如果我包含ngAnimate，则我的转盘将无法在Chrome中使用-如其github问题跟踪器

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

作为一种解决方法，我正在考虑使用传统CSS引导程序对轮播中的ng-show进行动画处理.我做了一些研究，但到目前为止我还没有运气.这可能吗?有人尝试过吗?非常感谢！

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!

推荐答案

您可以使用ng-class指令代替ng-show和ng-hide，这将有条件地将类添加到应擦除的元素中，从而调用所需的过渡，基本达到相同的效果，并且完全省略了ngAnimate模块. 这是显示实现的 plunker .

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.

这篇关于在不使用ngAnimate的情况下使用ng-show制作动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！