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