Angular - animate ng-show

Question

I've this simple HTML markup using Angular and Bootstrap:

Toggle panel: <input type="checkbox" ng-model="toggle"><br/>
<br/>
<div class="container">
    <section id="content">
        <div class="panel panel-default animate-show" ng-show="toggle">                
            <div class="panel-heading">
                <h3 class="panel-title">Panel title1</h3>
            </div>        
            <div class="panel-body">        
                Content1        
            </div>
        </div>        
        <div class="panel panel-default animate-show" ng-hide="toggle">                
            <div class="panel-heading">
                <h3 class="panel-title">Panel title2</h3>
            </div>        
            <div class="panel-body">        
                Content2        
            </div>
        </div>
        <div class="panel panel-default">                
            <div class="panel-heading">
                <h3 class="panel-title">Panel title3</h3>
            </div>        
            <div class="panel-body">        
                Content3  
            </div>
        </div>
    </section>
</div>

And this small Angular controller:

function MainController($scope) {
  $scope.toggle = true;
}

See this JSFiddle: http://jsfiddle.net/dennismadsen/1hr9q1ra/1/.

How can I add animations on the panels when they are shown/hidden?

Answer 1

I made it work here.

A few words though - I changed the angular version to 1.3 since I used ng-animate module.

Basically just added this css:

.panel {
  padding:10px;
  border:1px solid black;
  background:white;
}

.panel {
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
}

.panel.ng-hide {
  opacity:0;
}

And a very slight modification here:

var app = angular.module("myApp", ['ngAnimate']);

function MainController($scope) {
  $scope.toggle = true;
}

app.controller("MainController", MainController);