कोणीय

Question

के साथ बूटस्ट्रैप ढहने जैसा कुछ मैं एक छोटा ऐप बना रहा हूं और मैं AngularJS का उपयोग कर रहा हूं। ऐप के अंदर मुझे एक ढीला तत्व चाहिए और ट्विटर बूटस्ट्रैप का उपयोग करना लाइब्रेरी और मेरे लक्षित तत्व और ट्रिगर पर कुछ टैग जोड़ने जितना आसान होगा।

लेकिन मैं बूटस्ट्रैप या किसी अन्य की तरह अन्य बाहरी पुस्तकालयों लोड करने के लिए नहीं कोशिश कर रहा हूँ, इसलिए मैं कोणीय के साथ समान व्यवहार प्राप्त करने के लिए कोशिश कर रहा था:

$scope.collapse = function(target) { 

     var that = angular.element(document).find(target), 

      transitioned = { 
       'WebkitTransition' : 'webkitTransitionEnd', 
       'MozTransition' : 'transitionend', 
       'OTransition'  : 'oTransitionEnd otransitionend', 
       'msTransition'  : 'MSTransitionEnd', 
       'transition'  : 'transitionend' 
      }, 

      _transitioned = transitioned[ Modernizr.prefixed('transition') ], 

      height = that.outerHeight(true); 

     if (angular.element(that).hasClass("in")) { 
      that.height(0); 
     } else { 
      that.height(height); 
     }; 

     that.on(_transitioned, function() { 
      that.toggleClass("in"); 
     }); 
    }; 

आप मैं संक्रमण के लिए कोशिश कर रहा हूँ देख सकते हैं ऊंचाई (क्योंकि तत्व की ऊंचाई पर एक संक्रमण है) और अंत में कक्षा in जोड़ें। लेकिन यह बहुत अच्छी तरह से काम नहीं कर रहा है क्योंकि अगर मैं संक्रमण के अंत में सुन रहा हूं तो यह उस तत्व के अंदर किसी भी संक्रमण अंत में ट्रिगर होगा।

मुझे इसके साथ कुछ मदद की ज़रूरत होगी, मैं केवल कोणीय के साथ बूटस्ट्रैप को ढीला कैसे लिख सकता हूं? मुझे उन घटनाओं की आवश्यकता नहीं है जो बूटस्ट्रैप को shown, hidden या show, hide पर पसंद करते हैं, मुझे संक्रमण के साथ तत्व का एक सरल पतन ट्रिगर करने की आवश्यकता है और मेरे तत्वों को गतिशील गति रखने की आवश्यकता है (अन्यथा निश्चित ऊंचाई नहीं है, अन्यथा मैं पतन प्राप्त करने के लिए बस सीएसएस का उपयोग करूंगा)। मुझे बस सही दिशा में pinpointed की जरूरत है :)

Answer 1

ऐसा लगता है कि आप CSS3 संक्रमण के साथ कुछ तोड़ना चाहते हैं?

अच्छा, आप ऐसा कर सकते हैं, लेकिन नियंत्रक ऐसा करने के लिए गलत जगह है। आपको निर्देशों या कस्टम निर्देश में ऐसा करना चाहिए। सौभाग्य से, आप इसे एनजी-क्लास जैसे कोणीय मूल निर्देशों के साथ कर सकते हैं।

HTML:

<button ng-click="open = !open">Toggle</button>  
<div ng-class="{ showMe: open }" class="collapsable"> 
    <h3>This should collapse</h3> 
</div> 

और सबसे महत्वपूर्ण बात, अपने सीएसएस:

.collapsable { 
    display: inline-block; 
    overflow: hidden; 
    height: 0; 
    transition: height 1s; 
    -webkit-transition: height 1s;   
    -moz-transition: height 1s;   
    -o-transition: height 1s;   
    } 
    .collapsable.showMe { 
    height: 100px; 
    } 

And here is a plunker of it working.

महत्वपूर्ण, ध्यान दें CSS3 के संक्रमण सभी ब्राउज़रों में काम नहीं करेगा करने के लिए। विशेष रूप से आईई में। अंत में, मुझे लगता है कि आप शायद एक प्लगइन का उपयोग करके बेहतर हो जाएंगे जो किसी और ने पहले ही बनाया है, और फिर इसे एक कस्टम निर्देश में लेवरेज किया है जो कुछ बूलियन मान देखता है।

मुझे उम्मीद है कि इससे मदद मिलती है।

---

संपादित

height: auto (कम से कम इस पोस्ट के समय के रूप में) सीएसएस संक्रमण के साथ काम नहीं करता। तो, यही कारण है कि आप पहिया को फिर से शुरू करने के बजाय, किसी और की प्लगइन का उपयोग करना चाहेंगे। भले ही यह सिर्फ JQuery की एनिमेट() विधि है। अपने स्वयं के निर्देश रोलिंग के लिए छद्म-कोड इसलिए की तरह कुछ होगा: (आप JQuery का उपयोग कर रहे मानते हुए)

app.directive('collapseWhen', function() { 
    return function(scope, elem, attr) { 
    scope.$watch(attr.collapseWhen, function(val) { 
     var clone = elem.clone().appendTo('body'); 
     var h = clone.height(); 
     clone.remove(); 
     scope.animate({ height: (val ? h : 0) + 'px' }, 1000); 
    } 
    } 
}); 

और फिर आप इसे पसंद का उपयोग करेंगे:

<button ng-click="foo = !foo">Toggle</button> 
<div collapse-when="foo"> 

फिर से, उपर्युक्त psuedo-code है, मुझे नहीं पता कि यह काम करेगा या नहीं, अगर आप वास्तव में अपना खुद का रोल करना चाहते हैं तो यह आपको एक विचार देने के लिए है।

Answer 2

रोलैंड, कोणीय-UI टीम से Bootstrap Project पर एक नज़र डालें।

Answer 3

यदि मैं प्रश्नों को समझता हूं, तो मेरा समाधान कोणीय $ animateCss का उपयोग करना है। यहां दस्तावेज़ और उदाहरण https://docs.angularjs.org/api/ngAnimate/service/ $ एनिमेट सीएसएस

$ animateCss सेवा के साथ आप ngAnimate का उपयोग करके अपना स्वयं का एनीमेशन बना सकते हैं। यह कोणीय मॉड्यूल का एक उदाहरण है। डेमो नीचे

var AppModule = angular.module('myApp', ['ngAnimate']) 
    .controller('collapseCtrl', ['$scope', function($scope) { 
    $scope.btn1 = $scope.btn2 = $scope.btn3 = false; 
    }]).animation('.my-collapse', ['$animateCss', function($animateCss) { 
    return { 
     enter: function(element, doneFn) { 
     var height = element[0].offsetHeight; 
     return $animateCss(element, { 
      from: { 
      height: '0px', 
      overflow: 'hidden' 
      }, 
      to: { 
      height: height + 'px' 
      }, 
      cleanupStyles: true, 
      duration: 0.3 // one second 
     }); 
     }, 
     leave: function(element, doneFn) { 
     var height = element[0].offsetHeight; 
     return $animateCss(element, { 
      to: { 
      height: '0px', 
      overflow: 'hidden' 
      }, 
      from: { 
      height: height + 'px' 
      }, 
      cleanupStyles: true, 
      duration: 0.3 // one second 
     }); 
     } 
    }; 
    }]); 

https://plnkr.co/edit/DjU1A2vmiBB1dYXjkiN1