用动画切换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;
}])