css - AngularJS 1.3、ngAnimate 和 animate.css

Question

菜鸟在这里 :) 尝试设置一个 ngAnimation ，除了一件烦人的事情外，它基本上可以正常工作。 当页面加载时，ng-hide 动画正在运行。

如何防止这种情况发生？

代码如下: HTML:

<form name="signup_form" novalidate>

                <!-- USERNAME -->
                <label class="item item-input ">
                    <input type="text" placeholder="Username" name="username" ng-model="newUser.username" autocapitalize="off" autocorrect="off" ng-minlength=4 ng-maxlength=20  required/>
                </label>
                <div class="error" ng-show="signup_form.username.$dirty && signup_form.username.$invalid">
                    <small class="error" ng-show="signup_form.username.$error.required">Username is required.</small>
                    <small class="error" ng-show="signup_form.username.$error.minlength">Your name is required to be at least 4 characters</small>
                    <small class="error" ng-show="signup_form.username.$error.maxlength">Your name cannot be longer than 20 characters</small>
                </div>

这是CSS

.error {
    color: #F00;
    background: #F5F5F5;
    text-align: center;
}

.error.ng-show {
    -webkit-animation: bounceIn 1s;
    -moz-animation: bounceIn 1s;
    -ms-animation: bounceIn 1s;
    animation: bounceIn 1s;
}
.error.ng-hide {
    -webkit-animation: bounceOut 1s;
    -moz-animation: bounceOut 1s;
    -ms-animation: bounceOut 1s;
    animation: bounceOut 1s;
}

也尝试使用 ng-cloak 指令，但没有帮助。 将不胜感激任何帮助。非常感谢。

Answer 1

由于找不到原因，我从头开始，效果很好。 真的不知道发生了什么。