0

この例は、チェック ボックスをすばやく複数回クリックするまで問題なく動作します。その後、長方形を非表示にすることはできなくなりました。アニメーションが正常に完了し、長方形がフェードアウトし、非表示にする必要があるときに再び表示されます。理由はありますか？

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

1 に答える 1

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/

于 2014-07-11T05:01:03.493 に答える