angularjs - 用动画切换 2 个 div

Question

我有两个<div>用户在它们之间切换的checkbox. 如果复选框被选中，第一个<div>是打开的。如果checkbox未选中，<div>则应显示第二个。

问题是这必须在动画中发生，特别是关闭动画必须首先发生，只有当它完成后，才开始动画

这是没有动画的想法：http: //jsfiddle.net/HB7LU/11597/

<div ng-controller="Ctrl">
    <div class="first" ng-show="first"></div>
    <p><input type="checkbox" ng-model="first" />First open</p>
    <div class="second" ng-show="!first"></div>
</div>


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

myApp.controller('Ctrl',['$scope' ,function($scope) {
    $scope.first = true;
}])