पंक्तियों को जोड़े जाने पर कोणीय यूई-ग्रिड को एनिमेट करने के लिए कैसे करें

Question

मेरे पास एक कोणीय यूआई ग्रिड तत्व है। मैं डेटा सरणी के सामने समय-समय पर नए आइटम जोड़ रहा हूं। मैं केवल एक समय में कुछ जोड़ रहा हूं (जैसे 1 से 5 नए आइटम)

मैं यूआई ग्रिड को जोड़ने वाली नई पंक्तियों को एनिमेट करना चाहता हूं। अभी पंक्तियों को तुरंत जोड़ा जाता है, जो इसे अजीब बनाता है। मैं नई पंक्तियों को एनिमेट करना चाहता हूं ताकि यूआई ग्रिड ऐसा लगता है कि यह आसानी से उन्हें जोड़ता है।

क्या यह आसानी से संभव है? क्या इसके लिए कोई विकल्प है?

Answer 1

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

इसके बजाय आप पंक्तियों को जोड़ने और हटाने जैसे उपयोगकर्ता इंटरैक्शन पर मैन्युअल रूप से एनीमेशन ट्रिगर करने के लिए $ एनिमेट सेवा का उपयोग कर सकते हैं। यह संक्रमण को "नकल" करता है, जो इसे डीओएम की तरह दिखता है जब इसे नहीं बदला जाता है।

कहें कि आप नई पंक्तियों में फीका करना चाहते हैं। आपको आने वाले पंक्ति डेटा पर कुछ पहचानकर्ता होना चाहिए, और उस पर आधारित कक्षा को & लागू करें। आप तुरंत opacity: 0 सेट करेंगे, फिर पर संक्रमण के लिए $animate.removeClass() का उपयोग करें। सीएसएस इस प्रकार दिखाई देंगे:

.new-row { 
    opacity: 0; 
} 

.new-row-remove { 
    -webkit-transition: 1s linear all; 
    -moz-transition: 1s linear all; 
    -o-transition:1s linear all; 
    transition: 1s linear all; 
    opacity: 0; 
} 

.new-row-remove-active { 
    opacity: 1; 
} 

पंक्तियों को हटाने के लिए, आप आपरेशन रिवर्स करने की आवश्यकता होगी: एक delete-row वर्ग है कि पूर्ण अस्पष्टता से 0 के लिए संक्रमण होता जोड़ने तो वास्तव में दूर करने के लिए एक वादा हैंडलर का उपयोग एक बार $animate.addClass() किया जाता है। यहां सीएसएस है:

.delete-row-add { 
    -webkit-transition: 0.5s linear all; 
    -moz-transition: 0.5s linear all; 
    -o-transition: 0.5s linear all; 
    transition: 0.5s linear all; 
    opacity: 1; 
} 

.delete-row-add-active { 
    opacity: 0; 
} 

यह संक्षिप्त उत्तर है। बहुत अधिक स्पष्टीकरण और डेमो के लिए, मेरे पास यहां एक लेखन-लेखन उपलब्ध है: http://brianhann.com/ui-grid-and-row-animations