क्या फ्लेक्सबॉक्स आवेषण को एनिमेट करना और निकालना संभव है?

Question

जब मैं किसी फ्लेक्सबॉक्स से किसी आइटम को हटाता हूं, तो शेष आइटम एनिमेट करने के बजाए तुरंत अपनी नई स्थिति में "स्नैप" करते हैं।

संकल्पनात्मक रूप से, चूंकि आइटम अपनी स्थिति बदल रहे हैं, इसलिए मैं संक्रमणों को लागू करने की अपेक्षा करता हूं।

मैं एक flexbox करने के लिए सभी शामिल तत्वों (flexbox और बच्चों)

वहाँ संपादन चेतन करने के लिए किसी भी तरह से (जोड़ता & हटा देता है) है पर संक्रमण संपत्ति निर्धारित किया है? यह वास्तव में मेरे लिए एक शोस्टॉपर है और फ्लेक्सबॉक्स के साथ एक लापता टुकड़ा है।

Answer 1

याद रखें कि फ्लेक्सिबल बॉक्स मॉडल और ग्रिड लेआउट विनिर्देश लगातार बदल रहे हैं, यहां तक ​​कि गुण और मान्य मान भी। ब्राउज़र कार्यान्वयन भी पूरी तरह से दूर हैं। ऐसा कहा जा रहा है कि आप flex प्रॉपर्टी पर संक्रमण कर सकते हैं ताकि तत्व आसानी से संक्रमण कर सकें, फिर डीओएम पेड़ से नोड को हटाने के लिए बस TransitionEnd सुनें।

यहाँ, एक उदाहरण JSFiddle है क्रोम 21 में चल रहे: http://jsfiddle.net/5kJjM/ (मध्य div क्लिक करें)

var node = document.querySelector('#remove-me'); 
 

 
node.addEventListener('click', function(evt) { 
 
    this.classList.add('clicked'); 
 
}, false); 
 

 
node.addEventListener('webkitTransitionEnd', function(evt) { 
 
    document.querySelector('#flexbox').removeChild(this); 
 
}, false);

#flexbox { 
 
    display: -webkit-flex; 
 
    -webkit-flex-flow: row; 
 
} 
 

 
.flexed { 
 
    border: 1px solid black; 
 
    height: 100px; 
 
    -webkit-flex: 1 0 auto; 
 
    -webkit-transition: -webkit-flex 250ms linear; 
 
} 
 

 
.clicked { 
 
    -webkit-flex: 0 0 auto; 
 
}

<div id="flexbox"> 
 
    <div class="flexed"></div> 
 
    <div class="flexed" id="remove-me"></div> 
 
    <div class="flexed"></div> 
 
</div>

संपादित: आगे, स्पष्ट करने के लिए जब आप एक नोड निकालने के लिए, आपको अपने फ्लेक्स को 0 पर सेट करना चाहिए, फिर इसे डीओएम से हटा दें। नोड जोड़ने के दौरान, इसे फ्लेक्स: 0 में जोड़ें, फिर इसे फ्लेक्स में बदलें: 1

Answer 2

मैंने Treehouse से इस उदाहरण के आधार पर @ skyline3000 के डेमो को ठीक कर दिया है। यदि ब्राउज़र को परिवर्तित सुनिश्चित नहीं हैं कि अगर यह फिर से टूट जाएगा, लेकिन इस फ्लेक्स आकार परिवर्तन चेतन करने का इरादा तरीका प्रतीत हो रहा है:

http://jsfiddle.net/2gbPg/2/

इसके अलावा, मैं jQuery का इस्तेमाल किया, लेकिन यह तकनीकी रूप से आवश्यक नहीं है। सीएसएस बारे में ध्यान देने

.flexed { 
    background: grey; 
    /* The border seems to cause drawing artifacts on transition. Probably a browser bug. */ 
    /* border: 1px solid black; */ 
    margin: 5px; 
    height: 100px; 
    flex-grow: 1; 
    transition: flex-grow 1000ms linear; 
} 

.removed { 
    /* Setting this to zero breaks the transition */ 
    flex-grow: 0.00001; 
} 

एक बात आप शून्य के एक flex-grow के लिए संक्रमण नहीं कर सकता है, यह संक्रमण नहीं होगा यह सिर्फ गायब हो जाएगा। आपको बस एक बहुत ही छोटा मूल्य डालना होगा। सीमाओं को चित्रित करते समय भी एक आर्टिफैक्टिंग बग प्रतीत होता है इसलिए मैंने इस मामले में पृष्ठभूमि का उपयोग किया है।