快速离开和进入导致 angular ng-if 动画中的多个元素
quick leave and enter cause multiple element in angular ng-if animation
此文档中有一个 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-leave
的延迟更改为 0.001s
,你会发现你无法获得超过一个元素。
这里给大家看的是AngularJS官方文档的分叉版。 http://plnkr.co/edit/ok7nwOIRpR1TYYRkBRXj?p=preview
我只是将它的延迟从 0.5s
修改为 0.001s
此文档中有一个 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-leave
的延迟更改为 0.001s
,你会发现你无法获得超过一个元素。
这里给大家看的是AngularJS官方文档的分叉版。 http://plnkr.co/edit/ok7nwOIRpR1TYYRkBRXj?p=preview
我只是将它的延迟从 0.5s
修改为 0.001s