在 Angular 1.2 rc2 中使用 ng-animate 和 animate.css答案

【问题标题】：Using ng-animate with animate.css in angular 1.2 rc2在 Angular 1.2 rc2 中使用 ng-animate 和 animate.css
【发布时间】：2013-09-12 15:18:22
【问题描述】：

我正在将一些现有的角度代码从 1.1.5 移动到 1.2.0-rc.2。一些主要区别在于ngAnimate 的使用。

我在ng-class 中使用ng-if 和animate.css 的组合。

有关工作示例，请参阅 this plunkr。

我遇到的问题是，虽然 fadeIn 动画效果很好，但应该消失的元素需要将近一秒钟才能消失 - 两者之间没有平滑的过渡。这是我实际操作的简化示例，我更喜欢使用ng-if（我意识到这个示例可以使用ng-repeat 进行简化）。

这是ng-if 的问题，还是与实现有关的问题，animate.css 或其他？谢谢。

【问题讨论】：

这篇文章可能会有所帮助：yearofmoo.com/2013/08/…

标签： angularjs ng-animate animate.css

【解决方案1】：

将“隐藏”类从 ng-hide 更改为 fadeOut。 fadeOut，像 fadeIn 是 animate.css 的做法。

演示：http://plnkr.co/edit/l0xqnE?p=preview

<div ng-if="showFirst" ng-class="{ 'animated fadeIn' : showFirst, 'fadeOut': !showFirst }">

【讨论】：

交叉淡入淡出仍然存在问题，您的示例在 Firefox（Linux 和 OSX）上对我来说效果不佳，但我想这些东西带有“RC”标签。谢谢！
动画来自 CSS，Angular 只添加/删除类来触发动画。因为浏览器并不完全支持它们，所以浏览器之间存在一些差异。如果你想让它们都一样，你应该考虑通过 Angular 实现 JS 动画。