4

我的问题与这个和这个类似，但涉及 AngularJS 1.2.0 中的新动画。

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

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

这是一个 plunker 来展示我正在经历的行为。在这个 plunker 中，我设置了一个基本路由（“登录”页面），其中包含一个框和一个用于切换框可见性的按钮。请注意单击运行时该框是如何淡出的？它应该被隐藏起来。（我故意将动画设置为慢速，以便您可以看到正在发生的动画）。

如何阻止动画最初发生？

我试过的：

  • 设置ng-cloak在动画元素上。
  • ng-cloak与display: none !important添加的规则一起使用。（见此）
  • 在元素上设置display: none，就好像它是元素的“初始设置”一样。（见此）

有趣的是，这个plunker 行为正常，动画最初没有出现。这个 plunker 不使用路由，并且控制器在 body 标签上显式设置。我想使用路由。

4

1 回答 1

1

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

于 2014-03-16T18:36:04.113 回答