Angular.js: एनजी-शो / छिपाने में एक तत्व पर देरी होती है जो एनिमेट कर रहा है

ngAnimate लालची है क्योंकि यह मानता है कि सभी कीफ़्रेम / ट्रांज़िशन कोड जो किसी भी ट्रिगर्स के दौरान तत्व पर सक्रिय हैं, वहाँ ngAnimate के माध्यम से एनिमेटेड होना है। इसलिए, इस मामले में, .loader पास ngShow / ngHide से कोई लेना देना नहीं है, फिर भी इसे एक वैध एनीमेशन के रूप में चुना गया है।

इसके चारों ओर जाने के लिए, तत्व पर .ng-animate वर्ग लागू होने पर एनिमेशन स्टाइल को सरल मिटा देता है।

http://jsfiddle.net/PvS8k/4/

यह सीएसएस विरासत के साथ एक समस्या है। अगर पूरी तरह से getComputedStyle पर भरोसा किए बिना शैलियों का पता लगाने का एक बेहतर तरीका था, तो संभवत: इस तरह के झगड़े से बचा जा सकता है।

@ मत्स्को मुझे लगता है कि यह विशेष मामला वास्तव में प्रतिगमन है। जैसा कि आप @SimpleAsCouldBe के प्लंकर में देख सकते हैं, या इस प्लंकर में http://plnkr.co/edit/5cfIXfNryNOzK66q9YWL?p=preview 1.2.17 में, तत्व तुरंत गायब नहीं होता है, लेकिन 1.2.16 में, कर देता है। Https://github.com/angular/angular.js/commit/55b2f0e8620465559016b424967d90a86af597c0 के कारण यह सबसे अधिक संभावना है
मुझे लगता है कि इस वारंट का थोड़ा निरीक्षण हुआ; कम से कम चैंज में नोट होना चाहिए और इस बारे में डॉक्स।

वर्कअराउंड के लिए धन्यवाद, यह उम्मीद के अनुसार चाल करता है।

दो बिंदु। एक एनजी-शो के लिए विशिष्ट है और एक सामान्य है।

एनजी-शो + अनंत एनिमेशन:

क्या अनंत एनीमेशन _really_ में ng-show छिपाने की देरी है? मैंने सेकंड गिनने की कोशिश की और यह हमेशा 4 सेकंड नहीं होता है कि इसे छिपाने के लिए इंतजार करना पड़ता है। कभी-कभी इसके 5 या 7 ... अलग-अलग लगते हैं। इसके अलावा, अगर आप चेकबॉक्स को पलटकर फिर से बंद कर देते हैं तो यह कभी नहीं छिपता। मुझे लगता है कि यहां एक वास्तविक बग छिपा है।

दार्शनिक

एक गैर-योगदानकर्ता के रूप में, मेरे पास बहुत कुछ नहीं है, लेकिन शायद ऑप्ट-आउट इस लाइब्रेरी के लिए सही रणनीति नहीं है। यह बहुत ही आश्चर्यजनक रूप से जादुई है कि एक जेएस पुस्तकालय सीएसएस नियमों पर प्रतिक्रिया करता है .. अगर मुझे ng-animatable साथ तत्वों को टैग करना था तो मैं इसके लिए बहुत अधिक तैयार रहूंगा।

@SimpleAsCouldBe हाँ, मैं भी यही सोच रहा हूँ कि शायद सभी एनिमेशनों के लिए animate- उपसर्ग की आवश्यकता हो सकती है, ताकि ngAnimate फिर एनिमेशन में हुक हो जाए।

देरी के बारे में, ऐसा नहीं है कि देरी हो रही है, यह है कि अनंत भाग को रद्द कर देता है और केवल एक बार एनीमेशन चलाता है। इसलिए, जब आप इसे छिपाते हैं, तो यह 2s * 1.5 = 3 सेकंड के लिए प्रतीक्षा करता है और फिर यह टाइमआउट चेक चलाता है और एनीमेशन को बंद कर देता है। तो यह समय की एक अनावश्यक खिड़की है जो कि बिल्कुल भी नहीं होनी चाहिए - केवल CSS शैली का पता लगाना बहुत सीमित है।

@Narretz जबकि आपके द्वारा प्रदान की गई प्रतिबद्धता इस विशेष उदाहरण को प्रभावित कर सकती है, इसका वास्तव में प्रतिगमन से कोई लेना-देना नहीं है। इसका कारण यह है क्योंकि फिक्स से पहले .ng-hide स्टाइल था जो display:none मूल्य एक अलग समय पर लागू होता है। लेकिन वर्तमान निर्धारण सभी एनिमेशन किए जाने के बाद ही लागू होता है (एक बार .ng-animate वर्ग हटा दिए जाने के बाद)।

नीचे डेमो देखें। देखें कि .blue वर्ग के लिए चयनकर्ताओं के दो सेट कैसे हैं: एक .ng-animate और इसके बिना। .blue क्लास तुरंत लागू होने के बावजूद, ngAnimate को लगता है कि एक एनीमेशन होने वाला है और एक क्लोजिंग टाइमआउट लागू करने से पहले 3s (2s * 1.5 याद रखें) का इंतजार करेगा। आम तौर पर यह 2s होगा, लेकिन तत्व पर वास्तविक एनीमेशन के बाद से animationend घटना को कभी भी निकाल नहीं दिया जाता (जो कि .loader ) अनंत है और गैर-वर्ग द्वारा ट्रिगर नहीं किया गया है; या पिछले उदाहरण के लिए एनजी-शो)। इसलिए कहा जा रहा है कि यह पूर्व बग फिक्स के कारण प्रभावित नहीं होता है।
http://jsfiddle.net/PvS8k/15/

जब animated- हो, तो यह अचूक कम भोले और केवल चेतन बनाने के लिए सबसे अच्छा हो सकता है।

मुझे लगता है कि यदि आप ऑप्ट-इन एनीमेशन हैंडलिंग जैसे ब्रेकिंग परिवर्तन के लिए खुले हैं, तो यह कम आश्चर्यजनक डेवलपर अनुभव पैदा करेगा।

क्या आप सादे-पुराने .animate .ng-animate बजाय

मुझे भी यही समस्या है:
कोणीय के साथ> = 1.2.17 http://jsfiddle.net/9krLr/17/
कोणीय 1.2.16 के साथ कुछ भी ठीक नहीं है: http://jsfiddle.net/EZpQQ/1/

@ tole42 यह समाधान है:

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

आपकी सहायता के लिए धन्यवाद। वर्कअराउंड काम नहीं कर रहा है :(
गलत क्या है?
http://jsfiddle.net/9krLr/21/

@ tole42 उस

मुझे विश्वास है कि मुझे @ tole42 जैसा ही मुद्दा दिखाई

<div ng-hide="hideme">hide me</div>

अगर मुझे उस छिपाने पर एक एनीमेशन चाहिए था, तो मैं कुछ ऐसा करूंगा:

<div ng-hide="hideme" class="myanimation">hide me</div>

किसी ऐप में कुछ ऐसे उदाहरण हैं, जहाँ आप एक शो / हाइड और अन्य इंस्टेंस को चेतन करना चाहते हैं जहाँ आप चेतन नहीं करना चाहते हैं। ऐसे उदाहरणों में जहां आप चेतन नहीं करना चाहते हैं, आप किसी भी कस्टम एनीमेशन वर्ग के साथ दिखाए गए / छिपे हुए तत्व को नहीं सजाते हैं। इस उदाहरण में, कोणीय केवल "एनजी-छिपाने" वर्ग को एक छिपे हुए तत्व में जोड़ता है।

यदि आप अपने मॉड्यूल में भोलेपन को शामिल नहीं करते हैं, तो यह अपेक्षित रूप से काम करता है: तत्व तुरंत गायब हो जाता है। लेकिन सीधे तौर पर ngAnimate को शामिल करके, आपको दो पहेलियों में दिखाया गया व्यवहार मिलता है जो

काम के आसपास काम करने वाले कुछ जोड़े हैं:

.ng-hide-add {
    transition: 0s linear all;
}

या:

.ng-hide {
    display: none !important;
}

लेकिन यह सही नहीं लगता है कि उन मामलों में जरूरी होना चाहिए जहां आप किसी गैर-एनिमेटेड तरीके से कुछ छिपाने की कोशिश कर रहे हैं।

बस कुछ अतिरिक्त खोजों का पालन करने के लिए ...

समस्या को सरलतम संभव परिदृश्य में उबालने की कोशिश करना - सादे विभाजनों को दिखाना / छिपाना - समस्या प्रकट नहीं होती है।

मैंने @ tole42 द्वारा पोस्ट की गई

वे सीएसएस संक्रमण वास्तविक अपराधी प्रतीत होते हैं, क्योंकि कोणीय चेतन उनसे अवधि निकाल रहा है। यही कारण है कि उन तत्वों को दिखाते / छिपाते समय दृश्य देरी का कारण बनता है, भले ही आप जानबूझकर उस संक्रमण को चेतन करने की कोशिश नहीं कर रहे हों।

इसलिए मुझे नहीं लगता कि यह जरूरी समस्या है जिसे एंगुलर को हल करने का प्रयास करना चाहिए। यह अन्य सीएसएस पुस्तकालयों के साथ कोणीय-चेतन का उपयोग करने के एक साइड-इफेक्ट का अधिक है, जिसमें कुछ एम्बेडेड सीएसएस संक्रमण हो सकते हैं जिनकी आपको उम्मीद नहीं है!

मूल कारण को ट्रैक करने के लिए एक लंबा समय लिया, लेकिन अंत में एक कारण खोजने के लिए अच्छा था जो समझ में आता है।

हां, यह एक महत्वपूर्ण मुद्दा है, लेकिन यह संभव नहीं है, लेकिन अन्य पुस्तकालयों में getComputedStyle के नियंत्रण की कमी और बदलाव के कारण, यह पता लगाने में असमर्थ है।

इसे ठीक करने के दो उपाय हैं:

1) .ng-animate वर्ग के लिए स्टाइल को ओवरराइड करें:
http://jsfiddle.net/9krLr/27/

सीएसएस विशिष्टता की कमी के कारण यह आपके लिए पहले काम नहीं करता था।

2) $animateProvider.classNameFilter(regex) उपयोग करें। इस मामले में रेगेक्स सभी गैर-ट्रिगर ट्रिगर एनिमेशन पर एक हार्ड ब्लॉक रखेगा और केवल एनीमेशन को जगह लेने की अनुमति देगा यदि रेगेक्स एक क्लासनाम से मेल खाता है जो उस तत्व पर मौजूद है जिसे आप एनिमेटेड करना चाहते हैं।

ओह, एक प्रदाता को कॉन्फ़िगर करने के लिए जाना एक अच्छा तरीका है, मुझे यह बहुत पसंद है, @matsko!

त्वरित समाधान के लिए @pnutshellmenace धन्यवाद। इसने मेरा दिन बचाया।

मुझे समझ नहीं आ रहा है कि यहाँ अंतिम समाधान क्या था। @ मात्सको ने कहा:

यह अशुभ कम भोले और केवल चेतन बनाने के लिए सबसे अच्छा हो सकता है जब एनिमेटेड- कहीं सीएसएस उपसर्ग के रूप में है

लेकिन मुझे ऐसा कोई कार्यान्वयन नहीं दिखता है। मैंने $animateProvider.classNameFilter(regex) पर एक नज़र डाली, लेकिन फिर से, मुझे उत्तरों की तुलना में अधिक सवालों के साथ छोड़ दिया गया है। इसे लागू करने का एक व्यावहारिक तरीका क्या है और क्या होगा यदि एक से अधिक वर्ग नाम लागू हो?

मुझे लगता है कि कोई कारण नहीं है कि मुझे पता होना चाहिए कि मुझे क्या करना चाहिए। हमेशा ऐसी चीजें होंगी जो मैं चेतन नहीं करना चाहता हूं, और वर्तमान में मेरे पास अधिक है कि मैं दूसरे तरीके के बजाय चेतन नहीं करना चाहता हूं, जो मैन्युअल रूप से स्टाइल करता है ताकि वे अनएप्लिंग को निष्क्रिय कर सकें।

संपादित करें: इस ब्लॉग प्रविष्टि को मिला जो चीजों को परिप्रेक्ष्य में रखता है ... मैं इसे आज़माने जा रहा हूं: http://blog.fgribreau.com/2014/03/how-to-configure-ng-animate-to- work-on.html

2 संपादित करें: $animateProvider.classNameFilter(/enable-animate/); काम किया, लेकिन इस प्रक्रिया में मुझे कुछ दिलचस्प व्यवहार मिला:

मैंने एक तृतीय-पक्ष कोणीय मॉड्यूल की एक .js फ़ाइल को शामिल किया था, जो कि गैर-अंतरंग पर निर्भरता थी, और किसी भी तरह से एनिमेशन को अपने स्वयं के मॉड्यूल पर भी ट्रिगर किया जा रहा था। किसी तरह गैर-जनक मॉड्यूल मॉड्यूल गुंजाइश को प्रभावित कर रहा था?

मैं async ऑपरेशन के लिए $scope.$evalAsync(); का उपयोग करके इस उत्तर को प्राथमिकता