मैं 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>
डाउनवॉटिंग नहीं, लेकिन क्या आपने अपना जवाब परीक्षण किया? यह सबसे अच्छा जंकी है। –
@RyanWheale यह वास्तव में ज्ञात ऊंचाई सीमा वाले तत्वों के लिए ठीक काम करता है, जैसे 500px से 800px, समस्या यह है कि एनीमेशन समय लागू अधिकतम ऊंचाई पर निर्भर करेगा। बस इस संभावना को इंगित करना चाहता था :) – sabithpocker
ठीक है, मैंने समाधान का प्रदर्शन करने के लिए कुछ संशोधन किए हैं! लेकिन फिर यह केवल कुछ परिदृश्यों के लिए काम करता है :) – sabithpocker