गतिशील स्रोत

Question

के साथ एनजी-शामिल पर एनीमेशन छोड़ें मेरे पास एक एनजी-शामिल है जो एक गतिशील यूआरएल (अपेक्षित के रूप में काम कर रहा है) के आधार पर सामग्री लोड कर रहा है।

<ng-include class="my-content-area" src="templateUrl"></ng-include> 

समस्या जब मैं चेतन करने के लिए कोशिश कर रहा हूँ enter और सामग्री के leave आता है (कोणीय डॉक्स के अनुसार, उन दो घटनाओं रहे हैं एनजी-शामिल पर एनिमेट के लिए प्रदान करता है)।

.my-content-area.ng-enter, 
.my-content-area.ng-leave { 
    transition: all 500ms; 
}  
.my-content-area.ng-enter { 
    opacity:0; 
} 
.my-content-area.ng-enter.ng-enter-active { 
    opacity:1; 
}  
.my-content-area.ng-leave { 
    opacity:1; 
} 
.my-content-area.ng-leave.ng-leave-active { 
    opacity:0; 
} 

enter अपेक्षा के अनुरूप काम कर रहा है, लेकिन leave नहीं है। मैं बस सामग्री को तुरंत गायब कर रहा हूं (फीका नहीं) जब templateUrl मेरे नियंत्रक में बदल दिया गया है।

कोई विचार?

Answer 1

मैं गतिशील सामग्री के साथ this plunker बनाया है, और यह ठीक काम करता है।
इसे जांचने का प्रयास करें।
मुझे लगता है कि आपकी समस्या कंटेनर या तत्वों की स्थिति से संबंधित हो सकती है।
प्रारंभिक कोड from here लिया गया था। वहां आप angularjs 1.2+ में एनिमेशन के बारे में अधिक जानकारी प्राप्त कर सकते हैं।

Answer 2

उपयोग करके देखें:

.my-content-area.ng-leave { 
    -webkit-transition: all 500ms; /* Safari/Chrome */ 
    transition: all 500ms; 
}