angularjs - 快速离开和进入导致 Angular ng-if 动画中的多个元素

Question

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

Answer 1

发生这种情况是因为 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-leave 的延迟更改为 0.001s，您将确保您无法获得多个元素。

这里给你看的是官方 AngularJS 文档的分支版本。 http://plnkr.co/edit/ok7nwOIRpR1TYYRkBRXj?p=preview

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