Angular - animate ng-show - angularjs

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