एक सीएसएस बनाने के लिए

Question

मैं transform संपत्ति के साथ सीएसएस संक्रमण का उपयोग कर रहा तत्वों सिकुड़ता है जब जोड़ने और उन्हें हटाने को बदलने अन्य तत्वों के प्रवाह को प्रभावित करते हैं।

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

यदि मैं एक ट्रांसफॉर्म का उपयोग करने की बजाय ऊंचाई संपत्ति को एनिमेट करना चाहता हूं तो यह ठीक होगा, हालांकि वास्तविक उपयोग में मैं परिवर्तनीय ऊंचाई के तत्वों का उपयोग कर रहा हूं, इसलिए मुझे नहीं पता कि मैं किस ऊंचाई के बीच एनिमेट कर सकता हूं।

---

संपादित करें: लोगों height संपत्ति (जो के रूप ऊपर कहा गया है काम नहीं करेगा), या max-height संपत्ति एनिमेट सुझाव दिया है। max-height संपत्ति, कुछ हद तक काम करेंगे लेकिन आप संक्रमण के रूप में पूरी तरह से समय संरेखित नहीं कर सकता संक्रमण समय के अंत तक तत्व की वास्तविक ऊंचाई अतीत max-height संपत्ति का समायोजन रखेंगे।

एक अन्य समस्या इन तरीकों के साथ कि यह चिकनी एनिमेशन कि आप transform संपत्ति के साथ प्राप्त कर सकते हैं का उपयोग नहीं करता है। ऑब्जेक्ट का रूपांतरण आसानी से होगा, हालांकि निम्न तत्वों का आंदोलन खराब हो जाएगा क्योंकि ब्राउजर इन संक्रमणों को अलग-अलग प्रस्तुत करता है।

---

यहाँ मैं क्या मतलब है (तब जोड़ने तत्वों को दूर करने का प्रयास करें, और कूद देखते हैं जब तत्व निकाल दिए जाते हैं) के साथ एक JSFiddle है:

var button = document.querySelector("button"); 
 
var box = document.createElement("div"); 
 

 
box.className = "box"; 
 
box.appendChild(document.createTextNode("Click to delete")); 
 

 
button.addEventListener("click", function(e) { 
 
    var new_box = box.cloneNode(true); 
 

 
    new_box.addEventListener("click", function(e) { 
 
    this.className = "box deleting"; 
 
    window.setTimeout(function(e) { 
 
     new_box.remove(); 
 
    }, 1000); 
 
    }); 
 

 
    this.parentNode.appendChild(new_box); 
 
});

button { 
 
    font-size: 20pt; 
 
} 
 
.box { 
 
    font-size: 20pt; 
 
    margin: 10px; 
 
    width: 200px; 
 
    padding: 10px; 
 
    background: pink; 
 
    transform: scale(1, 1); 
 
    transform-origin: top left; 
 
} 
 
.deleting { 
 
    transform: scale(1, 0); 
 
    transition: all 1000ms ease; 
 
}

<button> 
 
    Add Box 
 
</button>

Answer 1

तत्वों जिसका लेआउट सीएसएस बॉक्स मॉडल से नियंत्रित होता है, संपत्ति को बदलने तब्दील तत्व आसपास के सामग्री के प्रवाह को प्रभावित नहीं करता है।

REF: Transform Rendering

आप वांछित प्रभाव प्राप्त करने के max-height संपत्ति (check this answer) का उपयोग करना होगा। आपके उत्तर के लिए

var button = document.querySelector("button"); 
 
var box = document.createElement("div"); 
 

 
box.className = "box"; 
 
box.appendChild(document.createTextNode("Click to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to deleteClick to delete")); 
 

 
button.addEventListener("click", function(e) { 
 
    var new_box = box.cloneNode(true); 
 
    new_box.style.height = (Math.random() * (200 - 30) + 30) + 'px'; 
 

 
    new_box.addEventListener("click", function(e) { 
 
    this.className = "box deleting"; 
 
    window.setTimeout(function(e) { 
 
     new_box.remove(); 
 
    }, 1000); 
 
    }); 
 

 
    this.parentNode.appendChild(new_box); 
 
});

button { 
 
    font-size: 20pt; 
 
} 
 
.box { 
 
    overflow:hidden; 
 
    font-size: 12pt; 
 
    margin-bottom: 10px; 
 
    width: 600px; 
 
    max-height:1000px; 
 
    padding: 10px; 
 
    background: pink; 
 
    transform: scaleY(1); 
 
    transform-origin: top left; 
 
} 
 
.deleting { 
 
    transform: scaleY(0); 
 
    max-height:0; 
 
    padding:0 10px; 
 
    margin-bottom:0; 
 
    transition: padding 1000ms ease,max-height 1000ms ease, transform 500ms ease 500ms, margin-bottom 1000ms ease; 
 
}

<button> 
 
    Add Box 
 
</button>

Answer 2

आप के चारों ओर एक आवरण बना सकते हैं सिकुड़ने वाले बक्से अब आप लाल बक्से को स्केल कर रहे हैं, इसका मतलब है कि यह अभी भी एक ही स्थान का उपयोग करता है, लेकिन इसे एक स्केल किए गए तरीके से प्रस्तुत किया जाता है। जब आप इसे अंततः हटा देते हैं, तो यह उस स्थान का अब और उपयोग नहीं करता है, इसके तहत तत्व ऊपर की ओर बढ़ेंगे।

आप प्रत्येक लाल बॉक्स के चारों ओर एक आवरण बनाते हैं, तो आप अंतरिक्ष लेता नियंत्रित कर सकते हैं। बस एक संक्रमण के साथ उस रैपर की ऊंचाई को भी बदलें।

/* css for a wrapper */ 
overflow: hidden; 
transition: height .2s; /* your time */ 

तो, केवल एक संक्रमण के साथ लाल बक्से पैमाने पर नहीं है, लेकिन यह भी उन्हें एक रैपिंग तत्व में डाल दिया, और उस तत्व की ऊंचाई बदल जाते हैं।

Answer 3

सबसे अच्छा के लिए प्रभावित करते हैं, आप मुक्केबाजी गुण जो उसके आसपास को प्रभावित संशोधित करने की आवश्यकता होगी। इसमें चौड़ाई/ऊंचाई, पैडिंग, मार्जिन और सीमा चौड़ाई शामिल है। नीचे दिए गए उदाहरण में, मैंने आपके वांछित प्रभाव के लिए प्रासंगिक गुण 0 पर सेट किया है। यह सभी गुण जो तत्व की लंबवत स्पेसिंग को प्रभावित शामिल हैं: height, padding-[top/bottom], margin-[top/bottom], और border-[top/bottom]-width सभी 0.

मैं भी बॉक्स के box-sizing: border-box; और overflow: hidden; जोड़ा के रूप में स्थानांतरित कर रहे हैं - आप देखना चाहिए क्या होता है जब उन नहीं हैं सेट। मैं आपको अपने बारे में उन लोगों के बारे में बताने दूंगा।

var button = document.querySelector("button"); 
 
var box = document.createElement("div"); 
 

 
box.className = "box"; 
 
box.appendChild(document.createTextNode("Click to delete")); 
 

 
button.addEventListener("click", function(e) { 
 
    var new_box = box.cloneNode(true); 
 

 
    new_box.addEventListener("click", function(e) { 
 
    new_box.style.height = this.offsetHeight + 'px'; 
 
    window.requestAnimationFrame(function() { 
 
     new_box.style.height = 0; 
 
     new_box.className = "box deleting"; 
 
     window.setTimeout(function(e) { 
 
     new_box.remove(); 
 
     }, 1000); 
 
    }); 
 
    }); 
 

 
    this.parentNode.appendChild(new_box); 
 
});

button { 
 
    font-size: 20pt; 
 
} 
 
.box { 
 
    box-sizing: border-box; 
 
    overflow: hidden; 
 
    font-size: 20pt; 
 
    margin: 10px; 
 
    width: 200px; 
 
    padding: 10px; 
 
    border: 5px solid red; 
 
    background: pink; 
 
    transform: scale(1, 1); 
 
    transform-origin: top left; 
 
} 
 
.deleting { 
 
    height: 0; 
 
    padding-top: 0; 
 
    padding-bottom: 0; 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
    border-top-width: 0; 
 
    border-bottom-width: 0; 
 
    transform: scale(1, 0); 
 
    transition: all 1000ms ease; 
 
}

<button> 
 
    Add Box 
 
</button>