当 ng-show 为 false 时，AngularJS 动画不会立即停止

Question

这是我的登录表单:

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

如您所见，最后一个跨度有一个动画，在发送表单时将触发该动画

这是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);
    }
}

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

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

为什么会发生这种情况？

Answer 1

也许使用 ng-if 而不是 ng-show 可以解决这个问题。 ng-show 只是显示和隐藏 DOM 元素，本质上是切换“显示”CSS 属性。也许这还不足以阻止你的动画。另一方面，ng-if 甚至不读取 DOM 元素。它的工作方式就好像该元素不存在于 HTML 中一样。