如何防止动画在最初隐藏的元素上运行？

Question

我的问题类似于this one和this one，但涉及AngularJS 1.2.0中的新动画。

基本上，我在注册页面上有一堆最初隐藏的元素，只有当某个表单元素无效时才会显示（它们指向无效的表单元素并显示一条消息，如“密码至少需要8个字符“）。这些消息在显示/隐藏时淡入淡出。

但是一旦显示注册页面，元素就会显示并淡出。它们是短暂可见的（它们在屏幕上“闪烁”或“闪光”，就像在需要使用ng-cloak的情况下一样）。

Here's一个蹲下来展示我所经历的行为。在这个运动员中，我设置了一个基本路线（“登录”页面），其中包含一个框和一个可切换框的可见性的按钮。请注意当您点击运行时该框会如何淡出？它应该被隐藏起来。 （我故意将动画设置得很慢，以便您可以看到动画的发生）。

我该如何停止最初发生的动画？

我已经试过什么：

• 的动画元素集ng-cloak。
• 使用ng-cloak并添加了display: none !important规则。 （请参阅this）
• 在元素上设置display: none，就好像它是元素的“初始设置”一样。 （请参阅this）

有趣的是，​​调节器运行正常，并且动画最初不会发生。 这个plunker不使用路由，并且控制器在body标签上显式设置。虽然我想使用路由。

Answer 1

您使用的角度版本存在问题。角动画改变了很多，我认为在1.2这样试试这个：

<script src="http://code.angularjs.org/1.2.14/angular.min.js"></script> 
<script src="http://code.angularjs.org/1.2.14/angular-animate.min.js"></script> 
<script src="http://code.angularjs.org/1.2.14/angular-route.min.js"></script> 

检查出来，我已经在这里分叉的plunker

http://plnkr.co/edit/Mchjx51GREGU2Gj0NBXX?p=preview