在角度1.2 rc2中使用ng-animate和animate.css

时间:2013-09-12 15:18:23

标签: angularjs ng-animate animate.css

我正在努力将一些现有的角度代码从 1.1.5 移动到 1.2.0-rc.2 。一些主要差异是使用ngAnimate

我在ng-if中使用了animate.cssng-class的组合。

有关工作示例,请参阅this plunkr

我遇到的问题是,当fadeIn动画工作正常时,应该消失的元素需要接近一秒才能消失 - 两者之间没有平滑过渡。这是我实际做的一个简化示例,我更喜欢使用ng-if(我意识到这个例子可以用ng-repeat简化。)

这是ng-if的问题,还是与实施有关的问题,animate.css或其他问题?感谢。

1 个答案:

答案 0 :(得分:3)

将您的“隐藏”课程从ng-hide更改为fadeOutfadeOutfadeIn一样,是animate.css的做法。

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

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