Estou usando o angular juntamente com o [ngAnimate][1]. Com o [ngAnimate][1] é possível adicionar algumas classes css no elemento em que se aplica `ng-hide`ou `ng-show` para aplicar uma animação de transição.

Preciso executar um `callback` ao término de uma animação `ng-show` ou `ng-hide`. Essas animações são feitas através de classes que defini no `css`.

Exemplo:

    <div ng-show="loading" class="animate">Carregando</div>

    <div ng-hide="loading" class="animate">Isso aqui só pode mostrar quando a div acima for oculta</div>


Ou seja, quando a variável `loading` for `false`, preciso a div `#loading` seja removida e a `#content` seja exibida, porém somente depois que `#loading` estiver oculta. 


O problema que estou tendo é que as duas estão em atividade ao mesmo tempo. Quer dizer, enquanto uma está ocultando, a outra já aparece. Isso faz com que a tela dê um pulo lá embaixo e depois fique normal.


Existe alguma maneira de executar um `callback` após o término de uma animação feita com `ng-show` ou `ng-hide`?


Exemplo no [JSFIDDLE](http://jsfiddle.net/ny8eLxr8/94/)


  [1]: https://docs.angularjs.org/api/ngAnimate