AngularJS animation won't stop immediately when ng-show is false - angularjs

Question

this is my login form:
<div class="container login">
<h2 class="header">Login</h2>
<form class="form-horizontal" role="form" name="loginForm">
<div class="form-group">
<label for="inputUsername" class="col-sm-2 control-label">Username</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputUsername" placeholder="Username" ng-model="data.userName" required>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password" ng-model="data.password" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="data.rememberMe"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<a ui-sref="forgotPassword">Forgot your password?</a>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-click="login(loginForm)" ng-disabled="loading">Sign in</button>
<span class="glyphicon glyphicon-refresh glyphicon-refresh-animate login-refresh" ng-show="loading"></span>
</div>
</div>
</form>
</div>
as you can see the last span has an animation that will be triggered when the form is being sent
this is the css:
.glyphicon-refresh-animate {
-animation: spin 1s infinite linear;
-webkit-animation: spin2 1.5s infinite linear;
}
#-webkit-keyframes spin2 {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
The problem is that when i set the $scope.loading back to false it will only hide the loading span after it finishes its animation round.
so lets say i change the animation time to 20 seconds, it will only hide the loading after something between 0-20 seconds (depending on the last run).
why is this happening?

Answer 1

Perhaps using ng-if instead of ng-show would fix this. ng-show merely shows and hides a DOM element, essentially toggling the "display" CSS attribute. Maybe this isn't enough to stop your animation. ng-if on the other hand doesn't even read the DOM element. It works as if the element doesn't exist in the HTML.

Answer 2

ngAnimate will wait until the animation has completed before hiding it.
You can prevent this by explicitly setting the animation to none:
.glyphicon-refresh-animate.ng-animate {
-webkit-animation: none 0s;
animation: none 0s;
}