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

发布时间：2020-12-17 16:58:40 所属栏目：安全来源：网络整理

导读：我的问题类似于 this one和 this one,但涉及AngularJS 1.2.0中的新动画. 基本上,我的注册页面上有一堆元素最初是隐藏的,只有在特定表单元素无效时才显示(它们指向无效的表单元素并显示“密码需要至少8个字符”的消息) .这些消息在显示/隐藏时淡入和淡出. 但

我的问题类似于 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行为正常,动画最初不会发生.此plunker不使用路由,并且控制器明确设置在body标签上.我想使用路由.

解决方法

您正在使用的角度版本存在问题. 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>

检查一下,我已经把你的龙头分叉了

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!