सवाल एनजी-शो / एनजी-छिपाने पर होने से कोणीय एनिमेशन रोकें


मेरे AngularJS एप्लिकेशन में मैं अपने लोडिंग स्पिनरों के लिए fontawesome का उपयोग कर रहा हूँ:

<i class="fa fa-spin fa-spinner" ng-show="loading"></i>

मैं अधिसूचना संदेशों के लिए एंगुलर टॉस्टर का भी उपयोग कर रहा हूं जिस पर एनजीएनिम पर निर्भरता है। जब मैं अपने AngularJS एप्लिकेशन में ngAnimate शामिल करता हूं, तो यह मेरे लोडिंग स्पिनरों को एक अजीब तरीके से एनिमेट करके गड़बड़ कर देता है। मैं इसे होने से रोकना चाहता हूं लेकिन इन लोडरों पर एनीमेशन को अक्षम करने का कोई तरीका नहीं ढूंढ सकता (यह मेरे ऐप में मौजूद प्रत्येक लोडर को अपडेट करना भी बदतर होगा)।

मेरी सटीक समस्या दिखाते हुए एक प्लंकर है।

http://plnkr.co/edit/wVY5iSpUST52noIA2h5a


44
2017-07-07 18:55


मूल


मैं इस जवाब में आया, लेकिन मैं अपने सभी लोडरों को "नो-एनिमेट" निर्देश के साथ सजा नहीं दूंगा stackoverflow.com/questions/23879654/... - Chris Lees
अपना खुद का शो निर्देश बनाने के बारे में क्या? - lucuma
@ ल्यूकुमा मैं पहिया को फिर से नहीं खोलूंगा अगर मैं इससे बच सकूं। इसके अलावा इसमें मुझे अपने सभी लोडर को इस नए एनजी-शो निर्देश के साथ अपडेट करना भी शामिल है। मेरा आदर्श समाधान इसे एक ही स्थान पर कॉन्फ़िगर करना होगा और इसके बारे में भूलना होगा। - Chris Lees
यह 1.2 में स्वचालित एनीमेशन वाले मुद्दों में से एक को उजागर करता है। मैं आशा करता हूं कि वे 1.1 में घोषित घोषणात्मक तरीके से वापस जाएंगे। मुझे नहीं लगता कि कोणीय तत्वों को एनिमेट करना चाहिए जबतक कि मैं उन्हें विशेष रूप से बताता हूं कि क्या एनिमेट करना है। - Jason Goemaat
@ जेसनगोमेमैट, क्योंकि कोणीय इतना मॉड्यूलर है, यह इतना मुद्दा नहीं है बल्कि परिवर्तनों को बनाए रखना है। मुझे तब तक पता नहीं था जब तक मैंने इसे क्लासनामफिल्टर के बारे में अभी तक शोध नहीं किया जो आपको एनिमेटेड पर बहुत अधिक नियंत्रण देता है। - lucuma


जवाब:


मुझे लगता है कि ऐसा करने का सबसे अच्छा तरीका है $animateProvider.classNameFilter जो आपको चीजों को एनिमेट करने या इस मामले में एनिमेट करने के लिए फ़िल्टर करने की अनुमति देगा। हम कुछ ऐसा करेंगे:

 $animateProvider.classNameFilter(/^((?!(fa-spinner)).)*$/);
 //$animateProvider.classNameFilter(/^((?!(fa-spinner|class2|class3)).)*$/);

डेमो:

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

कोणीय डॉक्स राज्य:

चेक किया गया है और / या सीएसएस वर्ग नियमित अभिव्यक्ति देता है जो चेक किया गया है   एक एनीमेशन प्रदर्शन करते समय। ClassNameFilter मान बूटस्ट्रैप पर   बिल्कुल सेट नहीं है और इसलिए प्रयास करने के लिए $ एनिमेट सक्षम करेगा   किसी भी तत्व पर एक एनीमेशन प्रदर्शन करें। क्लासनामफिल्टर सेट करते समय   मूल्य, एनिमेशन केवल उन तत्वों पर ही किया जाएगा जो सफलतापूर्वक   फ़िल्टर अभिव्यक्ति से मेल खाते हैं। यह बदले में प्रदर्शन को बढ़ावा दे सकता है   कम संचालित उपकरणों के साथ-साथ अनुप्रयोगों में बहुत कुछ शामिल है   संरचनात्मक संचालन।

टिप्पणी के साथ एक और जवाब के रूप में no-animate निर्देश, आप एक लिख सकते हैं ng-show निर्देश जो उच्च प्राथमिकता पर चलता है और एनीमेशन को अक्षम करता है। यदि तत्व में है तो हम केवल यही करेंगे fa-spinner कक्षा।

  problemApp.directive('ngShow', function($compile, $animate) {
    return {
      priority: 1000,
      link: function(scope, element, attrs) {

        if (element.hasClass('fa-spinner')) {
          // we could add no-animate and $compile per 
          // http://stackoverflow.com/questions/23879654/angularjs-exclude-certain-elements-from-animations?rq=1
          // or we can just include that no-animate directive's code here
          $animate.enabled(false, element)
          scope.$watch(function() {
            $animate.enabled(false, element)
          })

        }
      }
    }
  });

डेमो: http://plnkr.co/edit/BYrhEompZAF5RKxU7ifJ?p=preview

अंत में, और उपर्युक्त के समान, हम इसका उपयोग कर सकते हैं no-animate निर्देश अगर हम इसे थोड़ा और मॉड्यूलर बनाना चाहते हैं। इस मामले में मैं निर्देश का नामकरण कर रहा हूं faSpin जो आप उपरोक्त उत्तर में कर सकते हैं। यह अनिवार्य रूप से वही है जो हम उपरोक्त कोडसेट की टिप्पणी में उल्लिखित एसओ उत्तर से निर्देश को संरक्षित कर रहे हैं। यदि आप केवल इसके बारे में परवाह करते हैं fa-spin इस तरह नामकरण एनीमेशन मुद्दे अच्छी तरह से काम करता है, लेकिन अगर आपके पास अन्य है ng-show एनीमेशन समस्याएं जिन्हें आप नाम देना चाहते हैं ngShow और अगर खंड में जोड़ें।

  problemApp.directive('noAnimate', ['$animate',
    function($animate) {
      return {
        restrict: 'A',
        link: function(scope, element, attrs) {
          $animate.enabled(false, element)
          scope.$watch(function() {
            $animate.enabled(false, element)
          })
        }
      };
    }
  ])

  problemApp.directive('faSpin', function($compile, $animate) {
    return {
      priority: 1000,
      link: function(scope, element, attrs) {

        if (element.hasClass('fa-spinner')) {
          element.attr('no-animate', true);
          $compile(element)(scope);

        }
      }
    }
  });

डेमो: http://plnkr.co/edit/P3R74mUR27QUyxMFcyf4?p=preview


59
2017-07-08 13:25



हाँ!!! यह एकदम सही धन्यवाद @ ल्यूकुमा है! - Chris Lees
कोई बात नहीं। जिज्ञासा से आप किस समाधान का उपयोग करने जा रहे हैं? - lucuma
निश्चित रूप से $ animateProvider समाधान। मैं इसे एक ही स्थान पर कर सकता हूं और इसे अपना पूरा आवेदन प्रभावित कर सकता हूं। हालांकि कई समाधान प्रदान करने के लिए बहुत बहुत धन्यवाद। यह मुझे कुछ अलग-अलग स्थानों को समझने में मदद करता है जिन्हें मैं एंगुलरजेएस में लगा सकता हूं जिसे मैंने कभी नहीं सोचा था। - Chris Lees
समाधान के लिए धन्यवाद। मैंने एफए स्पिनर के एफए-स्पिन इंस्टैड के साथ $ एनिमेट प्रदाता का उपयोग किया - qmo
मैं आपके नो-एनिमेट निर्देश को नहीं समझता: आप किसके लिए देख रहे हैं? Scope.watch के पहले पैरामीटर में फ़ंक्शन घड़ी मान वापस कर देना चाहिए, हां? - westor


मुझे एक ऐसी ही समस्या थी जहां $ आइकन स्कोप वैरिएबल बंद होने के बाद भी मेरा आइकन कताई जारी रखेगा। मेरे लिए क्या काम किया था लपेटना था <i> एक अवधि में एफए-आइकन तत्व।

<span ng-if="loading"><i class="fa fa-refresh fa-spin"></i></span>

कोशिश करो!


37
2017-10-27 04:07



सरल और आसान ... बस उस तत्व के आस-पास एक <span> रखें जिसे आप एनिमेट करते हैं और वहां एनजी-लागू होते हैं। - u_b
जब आप उस तत्व के आस-पास एक साधारण अवधि डाल सकते हैं जिसे आप छिपाना / दिखाना चाहते हैं तो जेएस जोड़ना परेशान क्यों करें। मुझे लगता है कि यह निश्चित रूप से क्या कोणीय प्राप्त करने की कोशिश करता है। - RobertoNovelo
यह स्वीकार्य उत्तर होना चाहिए। - jbmilgrom
यह स्वीकार्य उत्तर होना चाहिए - निर्देश या कुछ अन्य जावास्क्रिप्ट कोड का उपयोग करने की आवश्यकता नहीं है। सरल और प्रभावी - kotpal
यह स्वीकार्य उत्तर होना चाहिए। - Sh4m


मुझे एक आसान तरीका मिल गया है।

<i class="fa fa-spinner" ng-show="loading" ng-class="{'fa-spin' : loading}"></i>

फोर्कड प्लंकर: http://plnkr.co/edit/mCsw5wBL1bsLYB7dCtQF

ऐसा करने के परिणामस्वरूप मैंने एक और छोटी समस्या में भाग लिया जहां आइकन 2 सेकंड से अधिक समय तक चलने पर स्थिति से बाहर दिखाई देगा, लेकिन यह 'ng-hide-add-active' वर्ग के कारण हुआ था, इसलिए मैं बस मेरे सीएसएस में जोड़ा गया:

.fa-spinner.ng-hide-add-active {
    display: none !important;
}

और उसने इसका ख्याल रखा।

संपादित करें: निको का समाधान इसका थोड़ा साफ संस्करण है, इसलिए मैं उसका उपयोग करने पर विचार करता हूं।


17
2018-04-20 19:13



कि सीएसएस ने मेरे लिए एक आकर्षण की तरह काम किया। यह वास्तव में समस्या के लिए सबसे अच्छा तय है। - parliament
यह बहुत अच्छा है, लेकिन यहां समस्या यह है कि आपको अपने लोडर तत्वों में से प्रत्येक को एनजी-क्लास निर्देश जोड़ना होगा। यह समस्या को हल करता है, लेकिन यदि आपके पूरे एप्लिकेशन में बहुत सारे स्पिनर हैं, तो यह उन सभी को गन्दा अपडेट कर सकता है। - Chris Lees
@ChrisLees सच- मैंने इसके बारे में भी सोचा नहीं था, लेकिन ऐसा इसलिए है क्योंकि हमने एक स्पिनर निर्देश बनाया जिसने इसे समाहित किया और फिर बस उस स्पिनर को हर जगह इस्तेमाल किया। ईमानदारी से, मुझे nicotr014 का जवाब अब भी बेहतर लगता है- यह वास्तव में सिर्फ इस जवाब का एक स्पिन-ऑफ है। - James Fiala
@JamesFiala मुझे हर जगह उपयोग करने के लिए एक स्पिनर निर्देश बनाने के विचार पसंद है। चर नामों के साथ संगत रहना यह बहुत आसान हो सकता है। - Chris Lees
@ChrisLees आपको एनजी-क्लास को अपडेट करने की आवश्यकता नहीं है। इसके बजाय, आप कर सकते हैं fa-spin कक्षा के अंदर कक्षा के अंदर। <i class="fa fa-spinner fa-spin" ng-show="loading"> - Fizer Khan


angular.module('myCoolAppThatIsAwesomeAndGreat')
  .config(function($animateProvider) {

    // ignore animations for any element with class `ng-animate-disabled`
    $animateProvider.classNameFilter(/^((?!(ng-animate-disabled)).)*$/);

  });

फिर आप कक्षा जोड़ सकते हैं ng-animate-disabled आप चाहते हैं कि किसी भी तत्व के लिए।

<button><i class="fa fa-spinner ng-animate-disabled" ng-show="somethingTrue"></i></button>


3
2017-10-17 00:07





अद्यतन कर रहा है जेम्स फियाला जवाब

<i class="fa fa-spinner fa-spin" ng-show="loading"></i>

आपको इसकी आवश्यकता नहीं है ng-class जैसा कि उल्लेख किया गया है @ जेम्स फियाला  उत्तर। लेकिन आपके पास होना चाहिए fa-spin कक्षा में से एक के रूप में।

शैली जोड़ें

.fa-spinner.ng-hide-add-active {
   display: none !important;
}

0
2018-02-05 13:53