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

there ng-if animation example in doc:https://docs.angularjs.org/api/ng/directive/ngif if clicking checkbox , repeatedly,you find more 1 element displayed,i don't know how avoid it.

this happens because ngif behaves different ngshow example. ngshow adds display: none style element must hidden, while ngif following:

the ngif directive removes or recreates portion of dom tree based on {expression}. if expression assigned ngif evaluates false value element removed dom, otherwise clone of element reinserted dom.

so if animation takes bit long, there more 1 element in dom.

in olivvv's example, if change delay of .animate-if.ng-enter, .animate-if.ng-leave 0.001s se cannot more 1 element.

here see forked version of official angularjs documentation. http://plnkr.co/edit/ok7nwoirpr1tyyrkbrxj?p=preview

i have modified delay 0.5s 0.001s