ऑटो-ऊंचाई सामग्री (संक्रमण के साथ) छिपाने/दिखाने के लिए एक सुरुचिपूर्ण, सीएसएस-केवल विधि की तलाश करना

Question

मुझे एक विधि चाहिए जो केवल सीएसएस संक्रमण का उपयोग करे, प्रभावी रूप से (और आकर्षक) होवर पर सामग्री को छुपाएं/दिखाएं।

चेतावनी यह है कि मैं गतिशील (ऑटो) ऊंचाई रखना चाहता हूं।

ऐसा लगता है कि इष्टतम मार्ग fixed height:0 के बीच height:auto पर संक्रमण करना होगा, लेकिन यह अभी तक ब्राउज़र में संक्रमणों द्वारा समर्थित नहीं है।

टिप्पणी के जवाब में स्पष्टीकरण :: यह इतना इंतजार कर रहे हैं जब तक सभी जीवित ब्राउज़रों हैं CSS3 के संगत है, बल्कि CSS3 के ही एक कथित कमी को संबोधित (जैसे। height:0 की कमी का सवाल नहीं है>height:auto)

मैंने कुछ अन्य तरीकों की खोज की है, जिन्हें निम्नलिखित पहेली (और नीचे विस्तृत) पर देखा जा सकता है, लेकिन उनमें से कोई भी मुझे संतुष्ट नहीं करता है, और मुझे अन्य दृष्टिकोणों के लिए प्रतिक्रिया/टिप्स पसंद आएंगे।

http://jsfiddle.net/leifparker/PWbXp/1/

बेस सीएसएस

.content{ 
    -webkit-transition:all 0.5s ease-in-out; 
    -moz-transition:all 0.5s ease-in-out; 
    transition:all 0.5s ease-in-out; 
    overflow:hidden; 
} 

---

रूपांतर # 1 - अधिकतम ऊंचाई हैक

.content { max-height:0px; } 
.activator:hover +.content{ max-height:2000px; } 

विपक्ष

ए। आपको मनमाने ढंग से ऊपरी अधिकतम-ऊंचाई सेट करने की आवश्यकता होगी, जो व्यापक गतिशील सामग्री के साथ संभावित रूप से जानकारी काट सकता है।

बी। हैं, (एक) को सावधानी के तौर पर, आप एक बहुत उच्च ऊपरी अधिकतम-ऊंचाई की स्थापना का सहारा, एनीमेशन पर देरी, अजीब, और अस्थिर हो जाता है के रूप में ब्राउज़र अदृश्य रूप से पूरी दूरी बदलाव। यह भी कम दृष्टि से प्रभावी आसान बनाता है।

---

रूपांतर # 2 - पैडिंग और विकास का भ्रम

.content { padding:0px; height:0px; opacity:0; } 
.activator:hover +.content { padding:10px 0px; height:auto; opacity:1; } 

विपक्ष

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

---

रूपांतर # 3 - दोषपूर्ण चौड़ाई केवल दृष्टिकोण

.content { width:0%; } 
.activator:hover +.content{ width:100%; } 

विपक्ष

एक। चौड़ाई के रूप में, लाइन-रैप बाद की रेखाओं पर किसी भी अतिरिक्त पाठ को मजबूर करता है, और हम एक सुपर लम्बे अदृश्य div के साथ समाप्त होते हैं जो अभी भी अचल संपत्ति की मांग करता है।

---

रूपांतर # 4 - प्रभावी है, लेकिन चिड़चिड़ा, font-size

.content { font-size:0em; opacity:0; } 
.activator:hover +.content{ font-size:1em; opacity:1; } 

विपक्ष

एक। हालांकि इसमें एक अच्छा, व्यापक प्रकार का प्रभाव है, लाइन के रूप में लाइन-रैप को स्थानांतरित करने के कारण अपरिवर्तनीय जिटर का कारण बनता है।

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

---

रूपांतर # 5 - की line-height

.content { line-height:0em; opacity:0; } 
.activator:hover +.content{ line-height:1.2em; opacity:1; } 

विपक्ष

एक Butteriness। मेरा पसंदीदा सौंदर्यशास्त्र, लेकिन # 4 के साथ, यह टेक्स्ट-केवल सामग्री के साथ सबसे अधिक काम करता है।

---

रूपांतर # 6 - विरोधी मार्जिन (के रूप में @graphicdivine द्वारा की पेशकश)

.wrapper_6 { min-height: 20px } 
.wrapper_6 .activator {z-index:10; position: relative} 
.wrapper_6 .content { margin-top: -100%; } 
.wrapper_6 .activator:hover +.content{ margin-top: 0 } 

विपक्ष

एक। होवर पर देरी है जो इष्टतम नहीं है। यह .content का परिणाम अदृश्य रूप से काफी दूर स्क्रीन पर टकरा रहा है, और आने से पहले नीचे एनिमेट करने के लिए समय ले रहा है।

बी।margin-top: -100% युक्त तत्व की चौड़ाई के सापेक्ष है। इसलिए, द्रव डिजाइन के साथ संभावना है कि जब खिड़की काफी कम हो जाती है, margin-top.content छिपाने के लिए पर्याप्त नहीं होगा।

---

जैसा कि मैंने कहा, इससे पहले कि यदि केवल हम height:0 और height:auto के बीच परिवर्तन कर सकता है, यह सब विवादास्पद होगा।

तब तक, कोई सुझाव?

धन्यवाद! लीफ

Answer 1

इस प्रयास करें, विरोधी मार्जिन:

.wrapper_6 { min-height: 20px } 
.wrapper_6 .activator {z-index:10; position: relative} 
.wrapper_6 .content { margin-top: -100%; } 
.wrapper_6 .activator:hover +.content{ margin-top: 0 } 

http://jsfiddle.net/PWbXp/

Answer 2

आप scaleY उपयोग करना चाहिए।

HTML:

<p>Here (scaleY(1))</p> 
<ul> 
    <li>Coffee</li> 
    <li>Tea</li> 
    <li>Milk</li> 
</ul> 

सीएसएस:

ul { 
    background-color: #eee; 
    transform: scaleY(0);  
    transform-origin: top; 
    transition: transform 0.26s ease; 
} 

p:hover ~ ul { 
    transform: scaleY(1); 
} 

मैं jsfiddle पर उपरोक्त कोड के एक विक्रेता के उपसर्ग संस्करण बनाया है, http://jsfiddle.net/dotnetCarpenter/PhyQc/9/

Answer 3

खैर ... मैं जानता हूँ कि यह हो गया है थोड़ी देर, लेकिन मुझे ऊंचाई एनीमेशन का उपयोग करने की ज़रूरत थी, और मेरा मानना ​​है कि कई अन्य प्रोग्रामर को अभी भी इसकी आवश्यकता है या/और इसे करने की आवश्यकता होगी।

तो, मैं यहां गिर गया क्योंकि जब उपयोगकर्ता सेल को घुमाता है तो मुझे सेल-टेबल के अंदर उत्पाद विवरण के मोड विवरण दिखाने की आवश्यकता होती है। उपयोगकर्ता को घुमाने के बिना, विवरण की अधिकतम 2 पंक्तियां दिखायी जाती हैं। एक बार जब उपयोगकर्ता इसे घुमाता है, तो सभी पंक्तियां (टेक्स्ट 1 से 8 लाइनों, गतिशील और अप्रत्याशित लंबाई के बाद से हो सकती हैं) किसी प्रकार की ऊंचाई एनीमेशन के साथ दिखानी चाहिए।

मैं एक ही दुविधा में आया हूं, और अधिकतम ऊंचाई ऊंचाई का उपयोग करना चुनता हूं (एक उच्च अधिकतम ऊंचाई निर्धारित करना, जो मुझे यकीन था कि मेरा टेक्स्ट कट नहीं करेगा), क्योंकि यह दृष्टिकोण मुझे सबसे स्वच्छ माना जाता है ऊंचाई को एनिमेट करने के लिए समाधान।

लेकिन मैं आपके जैसे ही "स्लाइड अप" एनीमेशन पर देरी से संतुष्ट नहीं हो सका।
जब मैंने संक्रमण वक्र के बारे में एक टिप्पणी यहां दी: http://css3.bradshawenterprises.com/animating_height/।

इस लड़के का विचार शानदार है, लेकिन केवल यह समाधान अकेले "स्लाइड डाउन" एनीमेशन के प्रभाव को "कट ऑफ" करता है। तो थोड़ा सोचकर मैं सिर्फ अंतिम समाधान में आया हूं।

स्लाइड नीचे एनीमेशन (होवर करें), एक साथ "चिकनी बढ़ने", और एनीमेशन स्लाइड बिना (:

तो यहाँ मेरी समाधान रिज़ के आइडिया (लिंक के ऊपर लड़का) का उपयोग है लगभग) "देरी":

div { 
 
    background-color: #ddd; 
 
    width: 400px; 
 
    overflow: hidden; 
 
    -webkit-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1); 
 
    -moz-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1); 
 
    transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1); 
 
    max-height: 38px; 
 
} 
 
div:hover { 
 
    -webkit-transition: max-height 2s ease; 
 
    -moz-transition: max-height 2s ease; 
 
    transition: max-height 2s ease; 
 
    max-height: 400px; 
 
}

<div> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac lorem ante. Vestibulum quis magna pretium, lacinia arcu at, condimentum odio. Ut ultrices tempor metus, sit amet tristique nibh vestibulum in. Pellentesque vel velit eget purus mollis 
 
    placerat sed sit amet enim. Sed efficitur orci sapien, ac laoreet erat fringilla sodales. 
 
</div>

यहाँ एक सरल JsFiddle

और यहां अपनी JsFiddle अद्यतन (यह टुकड़ा, वास्तव में) (मेरी राय में) मेनू, वर्णन और सब कुछ के लिए समाधान है कि अत्यधिक नहीं है

यह एक एकदम सही है अप्रत्याशित, लेकिन जैसा कि आपने पहले बताया था, उच्च अधिकतम ऊंचाई स्थापित करने की आवश्यकता है, और एक आश्चर्यजनक रूप से लंबी गतिशील सामग्री काट सकता है। इस विशिष्ट स्थिति में, मैं इसके बजाय ऊंचाई को एनिमेट करने के लिए jQuery/जावास्क्रिप्ट का उपयोग करूंगा। चूंकि सामग्री का अद्यतन पहले से ही कुछ प्रकार की जावास्क्रिप्ट का उपयोग करके किया जाएगा, इसलिए मुझे एनीमेशन के लिए जेएस दृष्टिकोण का उपयोग करके कोई नुकसान नहीं दिख रहा है।

आशा है कि मैंने वहां किसी की मदद की है!