用 ng-show 做动画而不用 ngAnimate答案

【问题标题】：Doing animation with ng-show without ngAnimate用 ng-show 做动画而不用 ngAnimate
【发布时间】：2015-03-28 21:51:45
【问题描述】：

我想为我的 ng-show 制作一个擦除动画。基本上，我想实现这个简单的动画，如plunkr 这里所示。

我知道 ngShow 从 Angular 1.3 开始就有一个用于 ng-animate 的钩子。不过，情况有点复杂。我有一个旋转木马，我使用 Angular UI Carousel 引导程序扩展了它。引导程序在 Chrome 中存在错误，因此需要为 carousel 标签下的所有元素禁用 ngAnimate。我需要轮播下的元素动画，但如果我包含 ngAnimate，我的轮播将无法在 Chrome 中工作——如他们的 github 问题跟踪器 here

中所述

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

【问题讨论】：

您是否尝试过使用$animate 服务手动制作动画？
@getOffMyLawn 抱歉，我对 angularJs 很陌生，但据我所知，$animate 服务是 ngAnimate 的一部分？并且轮播下组件的所有动画都被禁用:(
对不起，我把事情弄糊涂了，是的 $animate 是 ngAnimate 的一部分，所有的动画都是使用这个服务完成的。

标签： css angularjs carousel css-animations angular-ui-bootstrap

【解决方案1】：

您可以使用ng-class 指令代替ng-show 和ng-hide，这将有条件地将类添加到应该擦除的元素，调用所需的转换，提供基本相同的效果并完全省略@987654325 @ 模块。这是一个plunker 展示了实现。

【讨论】：