angularjs - Apply a state class to ui-view to allow different ng animation -

मुझे ui-view का उपयोग करते हुए वर्तमान स्थिति के आधार पर अलग-अलग एनिमेशन लागू करने की आवश्यकता है I

मेरे पास निम्न कोड है (संपादित करें: देखें)

  & lt; अनुभाग ui-view ng-class = "stateClass" & gt; & lt; / अनुभाग & gt;  

राज्य नियंत्रक प्रत्येक नियंत्रक में लागू होता है उदा:

  .controller ('loginController', फ़ंक्शन ($ दायरा, $ राज्य ) {// स्टेट स्तरीय नाम सेट करें $ scope.stateClass = 'slide-left'; console.log ($ scope);  

यह काम करता है और क्लास ठीक हो जाता है - लेकिन एनीमेशन

कठोर कठोर वर्ग के साथ, यह काम करता है (लेकिन अब मैं अलग एनिमेशन लागू नहीं कर सकता)।

क्या एनजी-क्लास को एनजी-एन्टर करें के बाद जोड़ा जा सकता है? क्या कोई सुझाव दे सकता है कि एनीमेशन कैसे प्राप्त किया जाए?

संपादित करें >> अजीब तरह से एनजी-छुट्टी < / कोड> एनिमेशन ठीक काम करते हैं। लेकिन सीएसएस अभी भी एनजी-एन्टर करें

अपने यूआई-दृश्य में निम्नलिखित निर्देशों को जोड़ें राज्य-वर्ग :

  .directive ('stateClass', ['$ sta ते ', फ़ंक्शन ($ राज्य) {वापसी {link: function ($ scope, $ element, $ attrs) {var stateName = $ state.current.name || 'Init', सामान्यीकृत स्टेट नाम = 'राज्य-' + राज्यनाम। स्थान (/। / G, '-'); $ Element.addClass (normalizedStateName); }}}]);  

पर एनजी-एन्टर करें , नव निर्मित तत्व के लिए यह वर्तमान स्थिति का नाम जोड़ देगा (राज्य यूआई-व्यू संक्रमण को बनाता है)। उस तत्व के लिए जो राज्य में गायब हो रहा है, वैसे ही बनी हुई है, जैसा कि पहले बनाया गया था।

उदाहरण के लिए:

मुख्य से modal स्थिति से संक्रमण:

चरण 1: मुख्य राज्य सक्रिय है:

  & lt; ui-view राज्य-वर्ग वर्ग = "राज्य-मुख्य एनजी-स्कोप" & gt; & lt; / ui-view & gt;  

चरण 2: चलाएं $ state.go ('modal');

  & lt; ui- दृश्य राज्य-वर्ग वर्ग = "राज्य-मॉडल एनजी-एनीमेट एनजी-एंटर एनजी-एंट-एक्टिव" & gt; & lt; / UI-view & gt; & Lt; ui-view राज्य-वर्ग वर्ग = "राज्य-मुख्य एनजी-एनीमेट एनजी-छुट्टी एनजी-छुट्टी-सक्रिय" & gt; & lt; / ui-view & gt;  

चरण 3: मोडल राज्य सक्रिय है

  & lt; ui-view state-class class = "state-modal "& gt; & lt; / ui-व्यू & gt;