AngularJS动画赢得'；当ng show为假时，不要立即停止

这是我的登录表单：

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

问题是，当我将$scope.loading设置回false时，它只会在完成动画循环后隐藏加载范围

假设我将动画时间更改为20秒，它只会在0-20秒之间隐藏加载（取决于上次运行）

---

为什么会发生这种情况？

nAnimate会等到动画完成后再隐藏它

可以通过将动画显式设置为“无”来防止出现这种情况：

.glyphicon-refresh-animate.ng-animate {
    -webkit-animation: none 0s;
    animation: none 0s;
}

---

也许用ng if代替ng show可以解决这个问题。ng show仅显示和隐藏DOM元素，本质上是切换“display”CSS属性。也许这还不足以停止动画。另一方面，如果不读取DOM元素，则为ng。它的工作原理就像HTML中不存在元素一样。

我认为这是动画的一部分。你可以隐藏它，但当你有动画时它隐藏的方式是它“动画化”。如果将ng show更改为ng if会发生什么情况？

ng if

也会在删除元素之前等待动画完成。我明白了。我不确定。我觉得值得一试，但我自己没有办法去测试。

.glyphicon-refresh-animate.ng-animate {
    -webkit-animation: none 0s;
    animation: none 0s;
}