Angular.js: एनजी-अगर सीएसएस अनंत कीफ़्रेम एनिमेशन के साथ अजीब तरह से व्यवहार करता है

को निर्मित 3 जन॰ 2014 · 3टिप्पणियाँ · स्रोत: angular/angular.js

https://github.com/angular/angular.js/issues/4818 से संबंधित

निम्नलिखित प्लंकर देखें: http://plnkr.co/edit/i1DJ6ejtuHVFHty9jxfe?p=preview

तत्व <div class="box" ng-if="showBox"> में स्थायी रूप से साइकिल चलाने की पृष्ठभूमि के लिए 5-सेकंड का अनंत एनीमेशन है। जब showBox का मान टॉगल किया जाता है, तो तत्व का एनीमेशन फिर से शुरू हो जाता है, और इसे DOM से तब तक नहीं हटाया जाता जब तक कि पूरे 5 सेकंड बीत नहीं जाते - कोई भी एंटर/लीव एनिमेशन परिभाषित नहीं होने के बावजूद।

इससे भी अधिक समस्याग्रस्त: यदि आप एनीमेशन समाप्त होने से पहले कई बार मान को टॉगल करते हैं (चेकबॉक्स को कई बार क्लिक करें), तो तत्व की कई प्रतियां एक साथ प्रदर्शित होती हैं।

ngAnimate moderate bug

स्रोत

tdumitrescu

सबसे उपयोगी टिप्पणी

समस्या यह है कि ngAnimate को लगता है कि आपका अनंत एनीमेशन उपयोग की जाने वाली सभी एनीमेशन घटनाओं (जैसे एंटर, लीव वगैरह) के लिए है। और चूंकि यह एक अनंत एनीमेशन है तो सीएसएस घटनाओं को तब तक नहीं निकाल दिया जाता जब तक कि अंतिम उलटी गिनती नहीं हो जाती जो 7.5 सेकंड (5 x 1.5 == 7.5) के बाद होती है।

आपको तत्व पर .ng-animate सीएसएस वर्ग को ओवरराइड करके और कीफ़्रेम एनिमेशन को रद्द करके अनंत पृष्ठभूमि एनीमेशन को एनिमेट न करने के लिए एनजी-एनिमेट को बताना होगा।

http://plnkr.co/edit/fq7ZEO7tDnqLmavHoBfQ?p=preview

.box.ng-animate {
  -webkit-animation: none 0s;
  animation: none 0s;
}

दुर्भाग्य से जावास्क्रिप्ट में शैलियों और सीएसएस वर्गों का पता लगाना अत्यधिक सीमित है। एंगुलरजेएस के पुराने संस्करणों के साथ हमारे पास नियम था कि आप केवल एनीमेशन संपत्ति (जैसे .ng-enter, .ng-leave और इसी तरह) पर CSS एनीमेशन/संक्रमण को परिभाषित कर सकते हैं, लेकिन इससे हल होने की तुलना में अधिक समस्याएं हुईं। तो इस मामले में आपको इसके विपरीत करने की जरूरत है।

पुनश्च. आपको केवल -webkit- उपसर्ग और मानक animation गुणों की आवश्यकता है क्योंकि अन्य सभी विक्रेताओं ने अपने उपसर्ग छोड़ दिए हैं।

matsko 5 जन॰ 2014

👍2

सभी 3 टिप्पणियाँ

http://plnkr.co/edit/fq7ZEO7tDnqLmavHoBfQ?p=preview

.box.ng-animate {
  -webkit-animation: none 0s;
  animation: none 0s;
}

matsko 5 जन॰ 2014

👍2

कूल, कामकाज के लिए धन्यवाद।

बहु-प्रतियां-एक-एक चीज अभी भी मेरे लिए एक बग की तरह लगती है: मैं इस धारणा पर अपना कोड लिखता हूं कि ng-if का उपयोग करने वाला तत्व या तो एक बार मौजूद है या बिल्कुल मौजूद नहीं है, और मुझे उम्मीद है कि अनजाने नोब गलती के कारण इसे इतनी आसानी से तोड़ने से रोकने के लिए ढांचा। कृपया मुझे सुधारें यदि मैंने गलत समझा है कि कैसे ng-if (या ng-switch ) कार्य करने के लिए अभिप्रेत है।

tdumitrescu 6 जन॰ 2014

कई प्रतियाँ वहाँ थीं क्योंकि एनिमेशन अभी भी चल रहे थे। और $animate में कीफ़्रेम/संक्रमण के लिए catch-all एनिमेशन है जो आपकी अवधि * 1.5 समाप्त होने के बाद होता है। इसलिए वे एक पल के बाद गायब हो जाते हैं।

आपका एनजी-अगर कोड सही है। और हाँ यह तभी होता है जब सच हो। लेकिन जब भी अभिव्यक्ति फिर से सच हो जाती है तो आंतरिक तत्व तत्व की एक नई प्रतिलिपि बनाते हैं। लेकिन चूंकि एनीमेशन पुराने तत्व पर लटक रहा है, तब तक इसे तब तक हटाया नहीं गया है जब तक कि सभी एनीमेशन पकड़ में न आ जाए।

और एनजी-स्विच और एनजी-अगर उसी तरह काम करते हैं। केवल एनजी-स्विच में केवल एक के बजाय कई तत्व होते हैं।

matsko 6 जन॰ 2014

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Angular.js: एनजी-अगर सीएसएस अनंत कीफ़्रेम एनिमेशन के साथ अजीब तरह से व्यवहार करता है

सबसे उपयोगी टिप्पणी

सभी 3 टिप्पणियाँ

संबंधित मुद्दों