How to perform a callback after an "ng-show" or "ng-Hide"?

Question

I’m using the angular along with the ngAnimate. With the ngAnimate it is possible to add some css classes to the element it applies to ng-hideor ng-show to apply a transition animation.

I need to run a callback at the end of an animation ng-show or ng-hide. These animations are done through classes I defined in css.

Example:

<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>

That is, when the variable loading for false, I need the div #loading is removed and the #content is displayed, but only after #loading is hidden.

The problem I’m having is that the two are active at the same time. I mean, while one is hiding, the other already appears. This causes the screen to jump down and then be normal.

Is there any way to execute a callback after the end of an animation made with ng-show or ng-hide?

Example in JSFIDDLE

Answer 1

How you only want to create the visual effect and display the content only after the loading screen has disappeared and still be able to use it $scope to control when each div will be displayed/hidden, can get the result only with another animation class with a delay. Example:

//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>

So just assign the class animate-in for the element that should appear after the div "loading" disappear and control the time of delay based on the animation time of the div of "loading". See an example working: http://jsfiddle.net/qak4jk26/

You can do this control within yourself AngularJS also using another $scope, example $scope.loadingIn, but it would be worse than just using CSS, 'cause I’d be using one more watcher