angularjs – 快速离开并输入导致角度ng-if动画中的多个元素

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

导读：此文档中有一个ng-if动画示例： https://docs.angularjs.org/api/ng/directive/ngIf 如果您快速反复点击复选框，您会发现不止一个元素将被显示，我不知道如何避免它。这是因为ngIf与ngShow的行为不同，例如。 ngShow只需要为必须隐藏的元素添加一个display

此文档中有一个ng-if动画示例： https://docs.angularjs.org/api/ng/directive/ngIf
如果您快速反复点击复选框，您会发现不止一个元素将被显示，我不知道如何避免它。

这是因为ngIf与ngShow的行为不同，例如。 ngShow只需要为必须隐藏的元素添加一个display：none样式，而ngIf则执行以下操作：

The ngIf directive removes or recreates a portion of the DOM tree
based on an {expression}. If the expression assigned to ngIf evaluates
to a false value then the element is removed from the DOM,otherwise a
clone of the element is reinserted into the DOM.

所以如果动画需要很长时间，那么DOM中就会有不止一个元素。

在Olivvv的例子中，如果你只是将.animate-if.ng-enter的延迟更改为.animate-if.ng，那么你将不会得到多于一个元素。

在这里可以看到它是官方AngularJS文档的分叉版本。 http://plnkr.co/edit/ok7nwOIRpR1TYYRkBRXj?p=preview

我只将其延迟从0.5s修改为0.001s

（编辑：李大同）

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