त्वरित छोड़ें और कोणीय एनजी-एनीमेशन में एकाधिक तत्व दर्ज करें

Question

इस दस्तावेज़ में एक एनजी-एनीमेशन उदाहरण है: https://docs.angularjs.org/api/ng/directive/ngIf यदि आप चेकबॉक्स को तेज़ी से और बार-बार क्लिक करते हैं, तो आपको एक से अधिक तत्व प्रदर्शित होंगे, मुझे नहीं पता कि इससे कैसे बचें।

Answer 1

ऐसा इसलिए होता है क्योंकि ngIf उदाहरण के लिए ngShow से अलग व्यवहार करता है। ngShow बस, तत्व यह है कि छिपे हुए किया जाना चाहिए करने के लिए एक display: none शैली कहते हैं, जबकि ngIf निम्नलिखित है:

ngIf निर्देश निकाल देता है या डोम पेड़ एक {अभिव्यक्ति} के आधार के एक हिस्से का पुनर्निर्माण करने वाला। यदि ngIf को निर्दिष्ट अभिव्यक्ति को गलत मान पर मूल्यांकन करती है तो तत्व को DOM से हटा दिया जाता है, अन्यथा तत्व के क्लोन को DOM में पुन: सम्मिलित किया जाता है।

तो यदि एनीमेशन थोड़ा लंबा लगता है, तो डोम में एक से अधिक तत्व होंगे।

ओलिवव के उदाहरण में, यदि आप .animate-if.ng-enter, .animate-if.ng-leave से 0.001s की देरी को बदलते हैं तो आप देखेंगे कि आपको एक से अधिक तत्व नहीं मिल सकते हैं।

यहां आप यह देखने के लिए आधिकारिक AngularJS दस्तावेज़ का एक फोर्क संस्करण है। http://plnkr.co/edit/ok7nwOIRpR1TYYRkBRXj?p=preview

मैं केवल 0.001s

कक्षा में