मैं छुट्टी पर वस्तुओं को कम करने के लिए एनजी-दोहराने में एनजी-एनिमेट का उपयोग कैसे करूं?

Question

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

मैं तो आप अपनी समस्या को देख सकते हैं यहाँ एक बेला की स्थापना की है: -

http://jsfiddle.net/rpk98c/6t42M/1/

प्रासंगिक HTML है: -

<ul> 
    <li ng-animate="{enter: 'repeat-enter', 
        leave: 'repeat-leave', 
        move: 'repeat-move'}" ng-click="remove($index)" ng-repeat="name in names">{{name}}</li> 
</ul> 

और प्रासंगिक सीएसएस: -

.repeat-enter-setup, .repeat-leave-setup, .repeat-move-setup { 
-webkit-transition:all linear 1s; 
-moz-transition:all linear 1s; 
-ms-transition:all linear 1s; 
-o-transition:all linear 1s; 
transition:all linear 1s; 
} 

.repeat-enter-setup { 
    max-height: 0; 
    opacity:0; 
} 
.repeat-enter-setup.repeat-enter-start { 
    max-height: 250px; 
    opacity:1; 
} 
.repeat-leave-setup { 
    opacity:1; 
    max-height: 250px; 
} 
.repeat-leave-setup.repeat-leave-start { 
    opacity:0; 
    max-height: 0; 
} 

कोई भी जानता है कि मैं गलत कहां गया हूं?

धन्यवाद,

रयान

ps सिर्फ आईई 10 में देखा कोई एनिमेशन काम करते हैं! मैं अब क्रोम में परीक्षण कर रहा हूं

Answer 1

आपको सेटअप के बजाय "प्रारंभ" कक्षाओं को प्रभावित करने के लिए सीएसएस की पहली पंक्ति को स्विच करने की आवश्यकता है। मुझे पता है, ऐसा नहीं है कि वे उदाहरण कैसे करते हैं लेकिन यह काम करेगा। इसलिए यह सुनिश्चित करें:

.repeat-enter-start, .repeat-leave-start, .repeat-move-start { 
    -webkit-transition:all linear 1s; 
    -moz-transition:all linear 1s; 
    -ms-transition:all linear 1s; 
    -o-transition:all linear 1s; 
    transition:all linear 1s; 
} 

यह मदद करता है, क्योंकि आप एक संपत्ति है कि तत्व आमतौर पर पास नहीं करता चेतन करने की कोशिश कर रहे हैं। तत्वों में आम तौर पर अधिकतम ऊंचाई वाली संपत्ति सेट नहीं होती है। तो जब आप संक्रमण के रूप में एक ही समय में अधिकतम ऊंचाई लागू करते हैं तो यह इस तथ्य को एनिमेट करेगा कि आपने संपत्ति जोड़ा है! प्रारंभिक चरण शुरू होने से पहले यह "प्रारंभ" कक्षा लागू होने से पहले है जिसका मतलब है कि सेटअप चरण समाप्त नहीं होगा (क्योंकि एनीमेशन 1 सेकंड लेता है)। तो जब आप "छोड़ें" एनीमेशन लागू करते हैं तो निम्नलिखित कदम होंगे।

1. आप तत्व अधिकतम ऊंचाई के बिना शुरू होता है।
2. "छुट्टी-सेटअप" कक्षा लागू होती है और आपको अधिकतम ऊंचाई और एक संक्रमण प्रदान करती है।
3. क्योंकि अधिकतम ऊंचाई केवल "बदली" (मौजूदा से मौजूदा नहीं है) और आपके पास एक संक्रमण है, ब्राउज़र अब आपके चुने हुए मूल्य पर कुछ डिफ़ॉल्ट प्रारंभिक मान (0 ऐसा लगता है) से अधिकतम-ऊंचाई को एनिमेट करना शुरू कर देगा 250px, तो तत्व तुरंत 0 तक गिर जाता है और एनिमेटिंग शुरू होता है!
4. अब "छोड़ने शुरू करें" कक्षा लागू की गई है, लेकिन चरण 3 अभी तक नहीं किया गया है! अधिकतम ऊंचाई अभी भी 0 है, या करीब है, क्योंकि यह अभी भी संपत्ति को सम्मिलित करने में व्यस्त है, इसलिए एनीमेशन बस बंद हो जाता है और 0 पर जाता है और हम कभी भी कुछ नहीं देखते हैं।

लेकिन यदि हम संक्रमण की संपत्ति को "सेटअप" से शुरू करते हैं- "शुरूआत" पर कदम, जैसे सीएसएस में, चरण 3 तत्काल होगा क्योंकि इसमें कोई संक्रमण नहीं है। संक्रमण पहले चरण 4 पर दिखाई देता है। इसलिए हमारे पास है:

1. आप तत्व अधिकतम ऊंचाई के बिना शुरू होता है।
2. "छुट्टी-सेटअप" कक्षा लागू होती है और आपको अधिकतम ऊंचाई देती है लेकिन संक्रमण नहीं होती है।
3. हमारे पास कोई संक्रमण नहीं है इसलिए अधिकतम ऊंचाई तुरंत 250px में बदल दी गई है।
4. अब "छोड़ने वाली" कक्षा लागू की गई है, और चूंकि चरण 3 समाप्त हो गया है, इस समय अधिकतम ऊंचाई अब 250px है और हम बिना किसी समस्या के इसे दूर कर सकते हैं।

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

संपादित करें:

मैं इस के साथ थोड़ा अधिक प्रयोग किया और यह पता चला है मेरा उत्तर (एफएफ विंडोज पर कम से कम नहीं) Firefox के लिए काम नहीं करता। सबसे पहले एफएफ बस सीधे ऊपर विफल करता है, तो आप एक गैर मौजूदा संपत्ति चेतन लगता है, ताकि आप सुनिश्चित करें कि आपके तत्व शुरू से ही एक अधिकतम ऊंचाई, की तरह कुछ है बनाने की जरूरत है:

li { 
    max-height: 250px; 
} 

इस सुधार के लिए छोड़ मैं, लेकिन किसी कारण से कोई भी एनीमेशन एनीमेशन विंडोज़ पर फ़ायरफ़ॉक्स में काम नहीं करेगा। अभी भी एक को समझने की कोशिश कर रहा है।

Answer 2

मुझे यकीन नहीं है कि max-height निर्दिष्ट क्यों करें। आप सभी ऊंचाई विनिर्देशों को छोड़ सकते हैं और ऐसा लगता है कि यह काम कर रहा है।

.repeat-enter-setup, .repeat-leave-setup, .repeat-move-setup { 
-webkit-transition:all linear 1s; 
-moz-transition:all linear 1s; 
-ms-transition:all linear 1s; 
-o-transition:all linear 1s; 
transition:all linear 1s; 
} 

.repeat-enter-setup { 
    opacity:0; 
} 
.repeat-enter-setup.repeat-enter-start { 
    opacity:1; 
} 
.repeat-leave-setup { 
    opacity:1; 
} 
.repeat-leave-setup.repeat-leave-start { 
    opacity:0; 
} 

Answer 3

स्वीकृत उत्तर अब कुछ समय से बाहर है, लेकिन यह अभी भी वास्तव में सहायक था क्योंकि मैंने इसी समस्या के माध्यम से काम किया था। यहाँ एनजी-चेतन के नवीनतम संस्करण और ng-repeat पर limitTo फिल्टर का उपयोग कर एक विस्तृत/संक्षिप्त करें कार्यक्षमता का एक उदाहरण है:

HTML:

<div ng-init="listLimit = 3"> 
    <div class="expander" ng-repeat="item in list | limitTo: listLimit"> 
     {{ item }} 
    </div> 
    <div ng-click="listLimit === 3 ? listLimit = list.length : listLimit = 3"> 
     <span ng-if="listLimit === 3">more</span> 
     <span ng-if="listLimit !== 3">less</span> 
    </div> 
</div> 

सीएसएस:

.expander { 
    max-height: 250px; 
    opacity: 1; 
    transition: all linear 0.8s; 
} 

.expander.ng-enter { 
    max-height: 0; 
    opacity: 0; 
} 

.expander.ng-enter-active { 
    max-height: 250px; 
    opacity: 1; 
} 

.expander.ng-leave { 
    max-height: 250px; 
    opacity: 1; 
} 

.expander.ng-leave-active { 
    max-height: 0; 
    opacity: 0; 
}