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

【问题标题】：angular ng-hide with animate.css strange behavior带有animate.css奇怪行为的角度ng-hide
【发布时间】：2014-07-10 19:41:35
【问题描述】：

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

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

【问题讨论】：

标签： angularjs ng-animate animate.css ng-hide

【解决方案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/

【讨论】：

添加 display:none!important; 为我修复了非动画 ng-hide 的闪烁问题。谢谢！
您的 jsfiddle 链接不再有效。阿什拉夫，你能解决这个问题吗？我对您的解决方案感兴趣。
对不起，我好像误删了。我试图为你创建一个新的小提琴，但我的解决方案不再有效:(jsfiddle.net/ashraffayad/1xb4o85L无论如何，最后我决定完全跳过角度动画并手动应用我的动画。