0

this example works fine until I click fast and multiple times on the check box. Then I can't hide the rectangle anymore. The animation completes fine, the rectangle fades out, then it becomes visible again when it should be hidden. Any idea why?

http://jsfiddle.net/sqDxL/2/

<div ng-controller="MyCtrl">
    <label><input type="checkbox" ng-model="hide" />hide</label> <br />
    {{hide}}<br />
   <div class="fade-in square" ng-hide="hide">&nbsp;</div>
</div>

// css
    .fade-in.ng-hide-remove { -webkit-animation:fadeIn 1s; animation:fadeIn 1s; }
    .fade-in.ng-hide-add{ -webkit-animation:fadeOut 1s; animation:fadeOut 1s;}
    .square {background: darkgreen; height: 200px; width:300px; }

// js
    var myApp = angular.module('myApp',['ngAnimate']);
    myApp.controller('MyCtrl', function($scope) {
        $scope.anim = 'fade-in';
        $scope.hide = false;
    });
Ashraf Fayad
  • 1,433
  • 4
  • 17
  • 31

1 Answers1

1

I solved it. I had to add: 

.ng-hide {
    display:none!important;
}

and change 

.fade-in.ng-hide-add { -webkit-animation:fadeOut 1s; animation:fadeOut 1s; display:block!important;}

to 

.fade-in.ng-hide-add-active { -webkit-animation:fadeOut 1s; animation:fadeOut 1s; display:block!important;}

http://jsfiddle.net/sqDxL/4/

Ashraf Fayad
  • 1,433
  • 4
  • 17
  • 31
  • Adding ```display:none!important;``` fixed a flicker issue on a non-animating ```ng-hide``` for me. Thanks! – Branden Barber Nov 19 '14 at 00:43
  • Your jsfiddle link no longer works. Ashraf, can you fix this? I am interested in your solution. – Eric Mar 12 '15 at 01:43
  • Sorry, I seem to have deleted it by mistake. I tried to create a new fiddle for you but my solution no longer works :( http://jsfiddle.net/ashraffayad/1xb4o85L/ Any way, in the end I decided to skip angular animation altogether and apply my animation manually. – Ashraf Fayad Mar 12 '15 at 11:37