Show an object right after hidding another with ng-show/ng-hide - angularjs

Question

I'm trying to make the effect when a button is clicked, the button fades out and in the same place a load animation fades in, but I can't manage to make the load animation show after the button is totally hidden.
In the HTML I have:
<div class="form-group">
<button ng-hide="login.sendingAjax" type="submit" id="loginButton" class="form-control btn btn-primary uppercase">INGRESAR</button>
<loader ng-if="login.sendingAjax" ng-show="login.sendingAjax" class="loaderContainer"></loader>
</div>
Then in my controller I have the function when the form is being submited, in that moment I put the login.sendingAjax variable to true for the button to be hidden and the animation to appear, and when it ends the call with a failure I put the login.sendingAjax variable back to false:
vm.loginError = false;
vm.sendingAjax = false;
/**
* Submit the form and check if login was ok
*/
vm.loginUser = function() {
vm.loginError = false;
vm.sendingAjax = true;
vm.alert = {};
authService.login(vm.formData).then(function () {
$location.path('/ubicaciones');
},
function () {
vm.alert = {type: 'danger', msg: 'Hola'};
vm.sendingAjax = false;
vm.loginError = true;
});
};
The CSS is:
.ng-hide-add { animation:0.5s hideObjectOpacity ease; }
/* when showing the picture */
.ng-hide-remove { animation:0.5s flipInX ease; }
/* ANIMATIONS (FROM ANIMATE.CSS) ======================== */
/* flip in */
#keyframes flipInX {
0% {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transition-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
100% {
transform: perspective(400px);
transform: perspective(400px);
transform: perspective(400px);
}
}
/* light speed out */
#keyframes hideObjectOpacity {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

Answer 1

there are two ways to handle that. one is that while NOT using ng-hide and ng-show, you can do the fade out animation with a function inside your JS (using a module like VelocityJS or ...), and inside it's callback, fade in the other element (the element should be display:none by default, and the animations should change the display property in their progress).
or you have to use different toggles for the ng-hide and ng-show, and set the ng-show toggle to true in the first function's callback or using $timeout ...
you can also fake the delay in entrance by manipulating the first few steps of the css animation and say set the opacity to 0 in them, until the first element is completely out... but i don't think it's a proper way of doing it . (considering your layout might change because an element with opacity:0 still exists in there!)
tell me if you need an example to understand it better