Collapsing bootstrap Panel

Collapsing bootstrap Panel and angularJS close and fade out

by fiddlejan

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.min.js"></script>

<body ng-app="app">
  <div ng-controller="controller as c" style="padding:10px;">
  
    <button class="btn" ng-click="add()" style="margin-bottom:5px;">
      add panel
    </button>

    <!-- childeren -->
    <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, $event)"></span>
                </h4>
            </div>

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

CSS

.fadein,
.fadeout {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
}

.fadein.ng-hide-remove,
.fadeout.ng-hide-add.ng-hide-add-active {
  opacity: 0;
  display: block !important;
}

.fadeout.ng-hide-add,
.fadein.ng-hide-remove.ng-hide-remove-active {
  opacity: 1;
  display: block !important;
}

JavaScript

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, e) {
   
        // do not activate animation
        e.stopPropagation();
   
				console.log('close ' + p);
        
    		for (var i = 0; i < $scope.panels.length; i++){
        		if ($scope.panels[i] == p){
            		$scope.panels.splice(i, 1);
            }
        }
    
		}
});