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

ngAnimate将等到动画完成后再隐藏它。

您可以通过将动画显式设置为none来阻止此操作：

#!/bin/sh
x=1
while [ $x -le 14400 ]
do
DD=$(date +%d)
MM=$(date +%m)
date >> /home/lasbr/Dokumente/"bmv"$DD$MM".log"
sh /etc/init.d/py.sh &
sleep 60s
x=$(( $x + 1 ))
done

Answer 2

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

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

2 个答案: