单击“关闭”时禁用折叠引导中的动画

我用引导带做了一些折叠面板。然后添加了一种方法来“关闭”并使用angular移除面板。唯一的问题是,当我关闭面板时,折叠、打开/关闭功能仍然有效。所以面板可能会打开然后消失,当它真的应该消失时。

下面是HTML的简化版本

    <div class="panel-group">
    <div class="panel panel-info fadein fadeout" ng-repeat="p in panels">
        <div class="panel-heading" data-toggle="collapse" data-target="#test_{{p}}" style="cursor:pointer">
            <h4 class="panel-title">
                open / close - {{p}}
                <span class="glyphicon glyphicon-remove pull-right" ng-click="close(p)"></span>
            </h4>
        </div>

        <div id="test_{{p}}" class="panel-collapse collapse" aria-expanded="false">
            <div class="panel-body">
                hello {{p}}
            </div>
        </div>
    </div>
</div>  

和angularJS

angular.module('app', ['ngAnimate'])

.controller('controller', function($scope){

    var i = 4;

    $scope.panels = ['panel_1', 'panel_2', 'panel_3']

    $scope.add = function(){
        console.log('add');
      $scope.panels.push('panel_' + i++);
    }

    $scope.close = function (p) {

        console.log('close ' + p);

            for (var i = 0; i < $scope.panels.length; i++){
                if ($scope.panels[i] == p){
                    $scope.panels.splice(i, 1);
            }
        }

        }
});

用小提琴来说明:

https://jsfiddle.net/fiddlejan/82bmcyt0/

当你点击关闭时,右边的十字架。面板将“打开”,然后消失(淡出动画在此处似乎不起作用)。我希望当您单击关闭时,关闭按钮只会移除面板。不要“打开”或“关闭”面板。

因此,在单击关闭按钮的情况下,应禁用面板折叠、打开/关闭功能。