Estou usando o angular juntamente com o ngAnimate. Com o ngAnimate é 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