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

Question

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

基本上，我的注册页面上有一堆元素，这些元素最初是隐藏的，仅在特定表单元素无效时才显示(它们指向无效的表单元素并显示一条消息，例如“密码需要至少为 8”)人物”)。这些消息在显示/隐藏时淡入淡出。

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

Here's一个笨蛋来展示我正在经历的行为。在这个 plunker 中，我设置了一个基本路线(“登录”页面)，其中包含一个框和一个用于切换框可见性的按钮。注意到当您单击“运行”时该框如何淡出吗？它应该只是被隐藏。 (我特意将动画设置得很慢，以便您可以看到动画的发生)。

如何阻止动画最初出现？

我尝试过的:

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

有趣的是，this plunker 行为正常，并且最初不会出现动画。 这个插件不使用路由， Controller 是在 body 标记上显式设置的。不过我想使用路由。

Answer 1

您使用的 Angular 版本有问题。我认为 Angular animate 在 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>

检查一下，我已经在这里 fork 了你的 plunker

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