angularjs - 带有animate.css奇怪行为的角度ng-hide

Question

在我快速多次单击复选框之前，此示例运行良好。然后我不能再隐藏矩形了。动画完成得很好，矩形淡出，然后当它应该被隐藏时它再次变得可见。知道为什么吗？

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;
    });

Answer 1

我解决了。我不得不补充：

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

和改变

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

至

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

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