कुछ तत्वों के लिए अक्षम करें

Question

मैं ngAnimate मॉड्यूल का उपयोग कर रहा है, लेकिन सभी मेरी ng-if, ng-show, आदि, कि से प्रभावित होते हैं, मैं कुछ चयनित तत्वों के लिए लाभ उठाने ngAnimate करना चाहते हैं। प्रदर्शन और तत्वों में कुछ कीड़े जो बहुत तेजी से दिखाते हैं और छिपते हैं।

धन्यवाद।

Comments

मुद्दे के कुछ उदाहरण कोड जोड़ें।

— cheekybastard

मुद्दों में से एक यह है कि display:blockआपके सभी रिपीटर्स पर अनिर्दिष्ट शक्तियां :ng-hide-add-active, .ng-hide-remove { display: block!important; }

— सोमाटिक

यह पूछने के लिए बेहतर प्रश्न होगा कि "मैं अपने सीएसएस को कैसे परिभाषित कर सकता हूं कि तत्वों के लिए सही ढंग से अचूक काम करने के लिए जो एक पूर्ण एनीमेशन लूप को पूरा किए बिना छिपे हुए हैं"। सबसे अच्छा जवाब नीचे क्रिस बर से है।

— एरिक

Answer 1

बस इसे अपने सीएसएस में जोड़ें। यह सबसे अच्छा है अगर यह अंतिम नियम है:

.no-animate {
   -webkit-transition: none !important;
   transition: none !important;
}

फिर no-animateउस तत्व के वर्ग में जोड़ें जिसे आप अक्षम करना चाहते हैं। उदाहरण:

<div class="no-animate"></div>

Comments

यदि आप sass का उपयोग कर रहे हैं, तो आपको "-webkit- संक्रमण: कोई भी महत्वपूर्ण नहीं है" की आवश्यकता नहीं है

— Marwen Trabelsi

कृपया ध्यान दें कि यह उत्तर गलत है, क्योंकि यह सभी परिवर्तनों को अस्वीकार करता है, न कि केवल उन लोगों द्वारा जो कि कोणीय द्वारा नियंत्रित किए जाते हैं।

— स्टैक्युलर

या तुमने कोशिश की? मुझे अपने कोड का एक नमूना देखने दें। यह मेरे लिए और छह से अधिक लोगों के लिए काम करता है, जिन्होंने इसे मंजूरी दी है

— डेविड एडोटेय

मैंने .no-animate, .no-animate-children *बच्चों को कवर करने के लिए एक नियम जोड़ा , आदि

— Kimball Robinson

@DavidAddoteye यह समाधान व्यवहार्य नहीं है यदि आपके पास एक एनजी-शो या एनजी है-यदि संक्रमण के साथ एक तत्व से अधिक है .. मेरा मतलब है .. अगर मेरे पास लोडर स्पिनर है जो केवल http अनुरोध के दौरान दिखाता है और अनुरोध के हल होने पर विघटित हो जाता है, जोड़ते हुए इस वर्ग का कोई भी परिणाम नहीं होगा !, माइकल जवाब ठीक है, लेकिन लागू करने के लिए बहुत थकाऊ है, और आपको नियंत्रकों में सीएसएस चयनकर्ताओं से बचने की कोशिश करनी चाहिए। एक निर्देश बनाना ठीक है, लेकिन ब्लोसी के जवाब को देखकर आप पाएंगे कि एंगुलरजेएस टीम ने पहले से ही इस समस्या की देखभाल के लिए एक लचीला तरीका प्रदान किया है;)

— एड्रियन

Answer 2

यदि आप विशिष्ट तत्वों के लिए एनिमेशन को सक्षम करना चाहते हैं (जैसा कि उन्हें विशिष्ट तत्वों के लिए अक्षम करने का विरोध किया जाता है) तो आप किसी विशेष वर्ग के नाम (या regex) को चेतन करने के लिए तत्वों को कॉन्फ़िगर करने के लिए $ aimateProvider का उपयोग कर सकते हैं।

नीचे दिया गया कोड उन तत्वों के लिए एनिमेशन सक्षम करेगा जिनके पास angular-animateकक्षा है:

var myApp = angular.module("MyApp", ["ngAnimate"]);
myApp.config(function($animateProvider) {
  $animateProvider.classNameFilter(/angular-animate/);
})

यहाँ उदाहरण मार्कअप है जिसमें angular-animateएनिमेशन को सक्षम करने के लिए वर्ग शामिल है :

<div ng-init="items=[1,2,3,4,5,6,7,8,9]">
  <input placeholder="Filter with animations." ng-model="f" /> 
  <div class="my-repeat-animation angular-animate" ng-repeat="item in items | filter:f track by item" >
    {{item}}
  </div>
</div>

प्लंकर का उदाहरण इस ब्लॉग से लिया गया है और संशोधित किया गया है जहाँ केवल पहले फ़िल्टर में एनिमेशन हैं ( angular-animateवर्ग होने के कारण )।

कृपया ध्यान दें कि मैं उपयोग कर रहा हूँ angular-animateएक उदाहरण के रूप और इसे का उपयोग पूरी तरह से विन्यास योग्य है .classNameFilterसमारोह।

Comments

आपने मेरा दिन बचाया। बहुत बहुत धन्यवाद

— gustavohenke

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

— निकोला एम।

यह स्वीकृत समाधान होना चाहिए। सही काम करता है और मेरा दिन बचाया!

वर्ग के /^(?:(?!ng-animate-disabled).)*$/साथ समाप्ति को अक्षम करने के लिए रेगेक्स का उपयोग करें ng-animate-disabled।

— IcanDivideBy0

महान समाधान! मेरे पास प्रति पृष्ठ 20 पंक्तियों के साथ एक पृष्ठांकित तालिका है। पृष्ठों को स्विच करने के लिए समय का एक तिहाई का उपयोग किया जा रहा था जो ब्राउज़र का उपयोग करते हुए एनीमेशन सीएसएस वर्गों को भी उपयोग नहीं कर रहे थे।

— केविन

Answer 3

अगर आप मॉड्यूल के आधार पर आश्रित हैं तो दो तरीके से आप AngularJS में एनिमेशन को मिटा सकते हैं:

1. $ चेतन सेवा पर विश्व स्तर पर एनिमेशन को अक्षम या सक्षम करें:

   $animate.enabled(false);

2. किसी विशिष्ट तत्व के लिए एनिमेशन को अक्षम करें - यह उस तत्व के लिए होना चाहिए जो कोणीय एनीमेशनस्ट्रेट सीएसएस वर्गों (जैसे एनजी-एन्टर, ...) को जोड़ देगा!

   $animate.enabled(false, theElement);

---

कोणीय 1.4 संस्करण के अनुसार आपको तर्कों को उलट देना चाहिए:

$animate.enabled(theElement, false);

---

के लिए प्रलेखन$animate ।

Comments

यह अपेक्षित तत्वों पर काम नहीं करता है। अगर मैं विश्व स्तर पर एनिमेशन बंद कर देता हूं और फिर एक विशेष तत्व पर इसे सक्षम करता हूं, तो यह काम नहीं करता है।

— कुशाग्र गौर

यह उत्तर हटा दिया जाना चाहिए या यह निर्दिष्ट करने के लिए संपादित किया जाना चाहिए कि कोणीय का कौन सा संस्करण वास्तव में काम करता है। 1.2.10 के लिए यह निश्चित रूप से कुछ तत्वों के लिए चेतन को सक्षम करने के लिए काम नहीं करता है, जो प्रश्न AFAICT का पूरा बिंदु है।

— त्रिन्दाज़

क्या किसी को पता है कि विकल्प 2 1.2.25 संस्करण पर काम कर रहा है?

— खोरवट

बस दस्तावेज़ीकरण ( docs.angularjs.org/api/ng/service/$animate ) को देखते हुए ऐसा लगता है कि «एलिमेंट» सक्षम फ़ंक्शन को पारित करने वाला पहला पैरामीटर है।

— डेनियल

Answer 4

कुछ तत्वों के लिए एनजी-चेतन को अक्षम करने के लिए, सीएसएस वर्ग का उपयोग करके, जो कोणीय चेतन प्रतिमान का अनुसरण करता है, आप रेगेक्स का उपयोग करके कक्षा का परीक्षण करने के लिए एनजी-चेतन को कॉन्फ़िगर कर सकते हैं।

कॉन्फ़िग

    var myApp = angular.module("MyApp", ["ngAnimate"]);
    myApp.config(function($animateProvider) {
        $animateProvider.classNameFilter(/^(?:(?!ng-animate-disabled).)*$/);
    })

प्रयोग

बस ng-animate-disabledकक्षा को उन तत्वों से जोड़ें जिन्हें आप एनजी-चेतन द्वारा अनदेखा करना चाहते हैं।

---

क्रेडिट http://davidchin.me/blog/disable-nganimate-for-selected-elements/

Comments

मुझे लगता है कि नग्न व्यवहार को फ़िल्टर करने का यह सबसे सही तरीका है!

— एड्रियन

यह इस उत्तर के लिए स्क्रॉल करने लायक था।

— जोसेफ हारुष

मैं पुष्टि कर सकता हूं कि एंगुलरजेएस के नवीनतम संस्करण के साथ यह निश्चित रूप से समस्या का सबसे अच्छा समाधान है।

— एडम रीस

Answer 5

धन्यवाद, मैंने एक निर्देश लिखा है जिसे आप तत्व पर रख सकते हैं

CoffeeScript:

myApp.directive "disableAnimate", ($animate) ->
  (scope, element) ->
    $animate.enabled(false, element)

जावास्क्रिप्ट:

myApp.directive("disableAnimate", function ($animate) {
    return function (scope, element) {
        $animate.enabled(false, element);
    };
});

Comments

यह एक निफ्टी दृष्टिकोण है, यह हमेशा स्पष्ट नहीं होता है कि तत्व ऑब्जेक्ट का उपयोग कैसे किया जाए, और कुछ अन्य दृष्टिकोणों के साथ मुझे डर है कि मैं जावास्क्रिप्ट को हार्ड-रेफ़रिंग या एक टेम्पलेट में परिभाषित कई तत्वों के साथ अपने नियंत्रकों को बंद कर दूंगा। । यह चिंताओं, यश की एक बड़ी जुदाई की तरह लगता है!

— मैट्टीगाबे

पैरामीटर ऑर्डर $ aimate.enabled में उलट है, अगर कोई सोच रहा है कि यह सभी एनजी एनीमेशन को निष्क्रिय क्यों करता है। यदि आप उपयोग करते हैं तो एक आकर्षण की तरह काम करता है$animate.enabled(element,false);

— gss

माफी जो मैं देखता हूं कि यह केवल 1.4.x + पर लागू होता है, उपरोक्त कोड पिछले संस्करणों के लिए सही है।

— gss

Answer 6

मुझे लगता है कि मिल गया है $animate.enabled(false, $element);तत्व है कि उपयोग के लिए इच्छा काम ng-showया ng-hideलेकिन यह काम नहीं करेगा तत्वों के लिए कि उपयोग ng-ifकिसी कारण से! मैं जिस समाधान का उपयोग कर समाप्त हुआ, वह यह सब सीएसएस में करना था, जिसे मैंने गीथहब पर इस धागे से सीखा था ।

सीएसएस

/* Use this for transitions */
.disable-animations.ng-enter,
.disable-animations.ng-leave,
.disable-animations.ng-animate {
  -webkit-transition: none !important;
  transition: none !important;
}

/* Use this for keyframe animations */
.disable-animations.ng-animate {
  -webkit-animation: none 0s;
  animation: none 0s;
}

एससीएसएस

.disable-animations {
  // Use this for transitions
  &.ng-enter,
  &.ng-leave,
  &.ng-animate {
    -webkit-transition: none !important;
    transition: none !important;
  }
  // Use this for keyframe animations
  &.ng-animate {
    -webkit-animation: none 0s;
    animation: none 0s;
  }
}

Comments

मेरा मामला यह था कि एनजाइना लोड होने के साथ, एक लोडिंग .ng-hide- जैसे वर्ग स्क्रीन पर तब तक रहेगा जब तक एक पूरा एनीमेशन लूप पूरा नहीं हो जाता। यह सबसे साफ जवाब है, क्योंकि यह मूल रूप से गैर-परिचित को सही कॉन्फ़िगरेशन खिलाने और सामान्य रूप से इसका उपयोग करने के लिए है। यह गलत है, फिर इसे अक्षम करना बेहतर है। तो आपके लिए +1, काश मैं स्कोर को और भी अधिक दे पाता।

— एरिक

यह पेचीदा जवाब है। इसे css के साथ करना js के साथ खिलवाड़ करने से ज्यादा बेहतर है।

— मानस

कृपया @Blowsie उत्तर को देखें, इससे निपटने के लिए यह अधिक सामान्य और सही तरीका है

— एड्रियन

Answer 7

मैं अपने उपयोग पर अचेतन का उपयोग नहीं करना चाहता ng-if, इसलिए यह मेरा समाधान होगा:

[ng-if] {
  .ng-enter, .ng-leave, .ng-animate {
    -webkit-transition: none !important;
    transition: none !important;
  }
}

बस एक और सुझाव के रूप में यह पोस्टिंग!

Answer 8

मेरे पास एक सूची है जिसमें से पहला liप्रयोग करके छिपा हुआ है ng-hide="$first"। में ng-enterपरिणाम का उपयोग करनाliगायब होने से पहले आधे सेकंड के लिए दिखाए जाने वाले ।

क्रिस बर्र के समाधान के आधार पर, मेरा कोड अब इस तरह दिखता है:

एचटीएमएल

<ol>
    <li ng-repeat="item in items"
        ng-hide="$first"
        ng-class="{'no-animate' : $first}">
    </li>
</ol>

सीएसएस

.no-animate.ng-enter,
.no-animate.ng-leave,
.no-animate.ng-animate {
        transition: none !important; /* disable transitions */
        animation: none 0s !important; /* disable keyframe animations */
}

li.ng-enter {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}
li.ng-enter-active {
    opacity: 1;
}

/* I use Autoprefixer. If you don't, please include vendor prefixes. */

Answer 9

मुझे पता है कि यह एक विलंबित उत्तर है, लेकिन यहां हम मेनकंट्रोलर में उपयोग करते हैं:

// disable all animations
$animate.enabled(false);

लेकिन समस्या यह है कि जब हम सभी एनिमेशनों को अक्षम करते हैं, तो ui-select को कॉन्फ़िगर किया जाता है opacity: 0 ।

तो, सीएसएस का उपयोग कर अपारदर्शिता को 1 पर सेट करना आवश्यक है:

.ui-select-choices {
    opacity: 1 !important;
}

यह ठीक से अस्पष्टता निर्धारित करेगा और ui-select काम करेगा।