CODEWITHSUNDEEP
angularjsng-animateangular-ng-if
fenyiwudian
fenyiwudian

Reputation: 470

quick leave and enter cause multiple element in angular ng-if animation

there is a ng-if animation example in this doc:https://docs.angularjs.org/api/ng/directive/ngIf if you clicking the checkbox quickly and repeatedly,you will find more than one element will be displayed,I don't know how to avoid it.

Upvotes: 17

Views: 884

Answers (1)

Ignacio Villaverde
Ignacio Villaverde

Reputation: 1264

This happens because ngIf behaves different to ngShow for example. ngShow simply adds a display: none style to the element that must be hidden, while ngIf does the following:

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.

So if the animation takes a bit long, there will be more than one element in the DOM.

In Olivvv's example, if you just change the delay of .animate-if.ng-enter, .animate-if.ng-leave to 0.001s you will se that you cannot get more than one element.

Here for you to see it is a forked version of the official AngularJS documentation. http://plnkr.co/edit/ok7nwOIRpR1TYYRkBRXj?p=preview

I have only modified its delay from 0.5s to 0.001s

Upvotes: 12

Related Questions