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

Question

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

Navigation

#1 by (1 votes)

1

I'm using the angular along with ngAnimate . With ngAnimate you can add some css classes in the element that applies ng-hide or ng-show to apply an animation of transition.

I need to execute a callback at the end of an animation ng-show or ng-hide . These animations are done through classes that I set 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 is false , I need the #loading div to be removed and #content is displayed, but only after #loading is hidden.

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

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

Example on JSFIDDLE

javascript angularjs ng-animate

asked by anonymous 17.08.2016 / 17:54

1 answer

How to "generate" multiple TCP clients using Threads in the same script? Dns.Resolve () vs Dns.GetHostEntry ()

score 1 · Accepted Answer

Since you intend to only create the visual effect and display the content only after the loading screen has disappeared and you still can use the same $scope to control when each div is displayed / hidden, you can only get the result 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>

In this way it is enough to assign the class animate-in to the element that should appear after the div "loading" subtract and control the delay time based on the animation time of div of "loading". Here's a working example: link

You can do this control within the AngularJS itself also using another $scope , example $scope.loadingIn , but it would be worse than using only CSS , as it would use another watcher