Search code examples
angularjsng-animateanimate.css

Using ng-animate with animate.css in angular 1.2 rc2

I working on moving some existing angular code from 1.1.5 to 1.2.0-rc.2. Some of the major differences is the use of ngAnimate.

I'm using a combination of ng-if with animate.css in ng-class.

See this plunkr for a working example.

The issue I'm having is that while the fadeIn animation works fine, the element that is supposed to disappear takes close to a second to vanish - there's no smooth transition between the two. This is a simplified example of what I'm actually doing, and I prefer to use ng-if (I realize this example can be simplified with ng-repeat).

Is this an issue with ng-if, or something that has to do with the implementation, animate.css or something else? thanks.

Solution

  • Change your 'hidding' class from ng-hide to fadeOut. fadeOut, like fadeIn is the animate.css way of doing it.

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

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