ngAnimate on ngIf, with height property

HTML

<script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular-animate.js"></script>
<div ng-app="myApp">
    <div ng-controller="AppCtrl">
        <input type="checkbox" ng-model="showDiv" id="showDiv" />
        <label for="showDiv">Toggle DIV</label>
        <div id="my-div" ng-if="showDiv" class="animate-if">He ben voilà, ça fonctionne !</div>
    </div>
</div>

CSS

#my-div {
    background-color: cornflowerblue;
    /* pour l'ex, on met une hauteur au div, pour qu'il soit suffisament
    haut pour le voir bien... */
    height: 200px;
}
/*
Pour dire en CSS3 ce qui devra être animé :
Angular ajoute dynamiquement des classes CSS.
La transition se fait soit entre ng-enter et ng-enter-active
ou entre ng-leave et ng-leave-active.
*/
 .animate-if.ng-enter, .animate-if.ng-leave {
    -webkit-transition: 1s linear all;
    -moz-transition: 1s linear all;
    -ms-transition: 1s linear all;
    -o-transition: 1s linear all;
    transition: 1s linear all;
}
/* du début de l'entrée */
 .animate-if.ng-enter {
    max-height: 0;
    opacity: 0;
}
/* à la fin de l'entrée */
 .animate-if.ng-enter.ng-enter-active {
    max-height: 999px;
    opacity:1;
}
/* du début de la sortie */
 .animate-if.ng-leave {
    max-height: 999px;
    opacity:1;
}
/* à la fin de la sortie */
 .animate-if.ng-leave.ng-leave-active {
    max-height: 0;
    opacity:1;
}

JavaScript

angular.module('myApp', ['ngAnimate'])
    .controller('AppCtrl', function ($scope) {

});