1

Estou usando o angular juntamente com o ngAnimate. Com o ngAnimate é possível adicionar algumas classes css no elemento em que se aplica ng-hideou 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

3
  • Da pra colocar um demo plnkr.co ? Commented 17/08/2016 às 16:54
  • @GabrielRodrigues atualizado Commented 17/08/2016 às 17:14
  • Entendi, por que você não diminui o tempo da ` transition: all 1.2s linear;` para 0.6 já da uma diferença; Commented 17/08/2016 às 17:51

1 Resposta 1

1

Como você pretende apenas criar o efeito visual e exibir o conteúdo somente após a tela de carregamento ter sumido e ainda assim poder usar o mesmo $scope para controlar quando cada div será exibida/escondida, pode obter o resultado apenas com outra classe de animação com um delay. Exemplo:

//CSS
.animate{
    transition: all 1s linear;
}
.animate-in {
    transition: all 1s linear;
    -webkit-transition-delay: 1s; //Delay
    transition-delay: 1s; //Delay
}
.animate.ng-hide,
.animate-in.ng-hide{
    opacity:0;
    color:red;
}

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

Deste modo basta atribuir a classe animate-in para o elemento que deve aparecer após a div "carregando" sumir e controlar o tempo de delay com base no tempo de animação da div de "carregando". Veja um exemplo funcionando: http://jsfiddle.net/qak4jk26/

Você pode fazer esse controle dentro do próprio AngularJS também usando outro $scope, exemplo $scope.loadingIn, mas seria pior do que usar apenas CSS, pois estaria usa mais um watcher

3
  • Transition-delay "atrasa" então o processo de "exibição"? Commented 17/08/2016 às 20:47
  • @WallaceMaxters Essa é a ideia. Ele vai apenas fazer com que a animação inicie após x segundos. transition define o tempo que a animação vai demorar para finalizar. transition-delay define quanto tempo esperar para que a animação se inicie. Commented 17/08/2016 às 20:49
  • 1
    @WallaceMaxters veja este exemplo com os tempos mais "exagerados" jsfiddle.net/qak4jk26/1 ele possui apenas 0.3s de duração da animação, mas com um delay de 5s. Commented 17/08/2016 às 20:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .