在没有 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 从 angular 1.3 开始就有了 ng-animate 的钩子.不过,情况有点复杂.我有一个使用 angular UI Carousel bootstrap 扩展的轮播.引导程序在 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屋!