मैं jQuery के स्लाइडडाउन जैसे स्लाइड डाउन प्रभाव को कैसे प्राप्त कर सकता हूं, लेकिन केवल सीएसएस का उपयोग कर रहा हूं?

CSS3 एनीमेशन के साथ एक समस्या है। वे "ऑटो" ऊंचाई संपत्ति (और चौड़ाई, मार्जिन इत्यादि) का समर्थन नहीं करते हैं। तत्व की सटीक ऊंचाई को जानने के बिना CSS3 स्लाइड डाउन एनीमेशन बनाने का सबसे अच्छा तरीका क्या है?मैं jQuery के स्लाइडडाउन जैसे स्लाइड डाउन प्रभाव को कैसे प्राप्त कर सकता हूं, लेकिन केवल सीएसएस का उपयोग कर रहा हूं?

प्रश्न this एक जैसा है, लेकिन स्वीकृत उत्तर वास्तविक प्रश्न का उत्तर नहीं देता है क्योंकि वे उस तत्व की ऊंचाई की गणना करने की समस्या से निपटते नहीं हैं, जिसे आप स्लाइड करना चाहते हैं।

स्रोत

2011-10-06 Ron Reiter

मुझे यकीन है कि अगर आप * बिल्कुल * एक ही बात कह रहे हैं नहीं कर रहा हूँ, लेकिन इस पर एक नज़र डालें: http://stackoverflow.com/questions/5072526/css-3-equivalent-to-jquery -स्लाइडअप-एंड-स्लाईडउन – thirtydot

@ थर्डडॉट, वहां समस्या का कोई उचित समाधान नहीं है। ऑटो ऊंचाई स्लाइड समस्या के करीब एकमात्र समाधान लाइन-ऊंचाई एनीमेशन का उपयोग कर रहा है, जो खराब दिखता है, और यह केवल पाठ के साथ संगत है। –

@thirtydot, इसके अलावा, स्वीकार्य उत्तर वास्तव में समस्या को हल नहीं करता है। –

आप इस डेमो मुझे लगता है कि पर खोदा देखा है

इस div आप पर चेतन करना चाहते है तो बोलो का जवाब? http://jsfiddle.net/XUjAH/6/

मैंने अपना खुद का लिखने की कोशिश की, लेकिन ऐसा लगता है कि यह काम नहीं कर रहा था।

स्रोत

2011-10-06 15:12:05 Blender

मेरी इच्छा है कि एक और ठोस समाधान हो, शायद कुछ jQuery प्लगइन इस तरह: https://github.com/benbarnett/jQuery-Animate- उन्नत –

तो, उस प्लगइन के साथ क्या गलत है? 'स्लाइडडाउन' सिर्फ 'एनिमेट ({ऊंचाई: 'टॉगल'} है);'। – Blender

यहां बेन से एक मेल है, इसके लेखक: हे अफसोस की बात है, मुझे इन संक्रमणों को तेज करने से बचने के लिए एक फ़ंक्शन लिखना पड़ा क्योंकि यह कुछ अजीब प्रदर्शन समस्याओं का कारण बन रहा था। यदि आप इस फ़ंक्शन पर एक नज़र डालते हैं: _isBoxShortcut() लाइन 354: https://github.com/benbarnett/jQuery-Animate-Enhanced/blob/master/scripts/src/jquery.animate-enhanced.js# एल 354 मुझे उन्हें काम करने के लिए एक रास्ता खोजना अच्छा लगेगा। यदि आप चारों ओर एक खेल बनाना चाहते हैं, तो बस उस फ़ंक्शन को 'वापसी झूठी' बनाएं और फिर प्लगइन सभी स्लाइडडाउन, स्लाइडअप और स्लाइड को शॉर्टकट्स को CSS3 एनीमेशन में परिवर्तित कर देगा। –

-1

इसे देखें: http://jsfiddle.net/gion_13/eNR6Q/ यह सिर्फ सीएसएस 3 एनीमेशन है। अन्य ब्राउज़रों में उपयोग करने के लिए ब्राउजर विशिष्ट विक्रेता सीएसएस उपसर्गों को बदलने/जोड़ने के लिए: क्रोम & सफारी के लिए "-वेबिट", ओपेरा के लिए "-o" और यानी

स्रोत

2011-10-06 13:44:09

एक अच्छा जवाब नहीं है, क्योंकि यह ऑटो ऊंचाई से निपटता नहीं है। धन्यवाद हालांकि –

आप जानते थे इसे डुप्लिकेट करके तत्व की ऊंचाई, इसकी ऊंचाई को "ऑटो" पर सेट करना और यह पूछना कि इसकी ऊंचाई पिक्सेल में क्या है। , <div id="mydiv" style="height:0px"> उसकी ऊंचाई (केवल सादगी के लिए jQuery का उपयोग) यह पता लगाने के लिए इस कोड का उपयोग करें::

var divHeight = $("#mydiv").clone().css("height", "auto").height();

स्रोत

2011-10-06 15:04:30 dutzi

हे @ डुटजी, आपको इसे क्लोन करने की आवश्यकता क्यों है? क्यों न केवल ऑटो ऊंचाई सेट करें और इसकी ऊंचाई मापें? –

क्योंकि कुछ ब्राउज़र इसे "नई" ऊंचाई में तत्व को प्रस्तुत करने का प्रयास कर सकते हैं इससे पहले कि आप इसे वापस बदल दें, जिससे यह झिलमिलाहट हो जाए।आप इससे पहले "डिस्प्ले" को "none" में बदल सकते हैं, हालांकि ... – dutzi

मैं इस का उपयोग कर रहा:

.slide-down { 
    transition: max-height .3s ease-out, opacity .3s ease-out, margin .3s ease-out; 
    overflow: hidden; 
    max-height: 100px; 

    &.collapsed { 
    max-height: 0; 
    opacity: 0; 
    margin: 0; 
    } 
}

यदि आप कम या सास का उपयोग कर रहे प्रभाव की अवधि और कम करने के लिए एक चर का उपयोग कर सकते हैं।
प्रभाव को ट्रिगर करने के लिए, $('.slide-down').toggleClass('collapsed') का उपयोग करें।
यदि आपके कंटेनर के लिए 100px बहुत छोटा है, तो तत्व में अतिरिक्त सीएसएस क्लास का उपयोग करके एक अलग अधिकतम ऊंचाई सेट करें।
यदि आप फैंसी महसूस करते हैं, ease-out के बजाय cubic-bezier(0.17, 0.04, 0.03, 0.94) का उपयोग करने का प्रयास करें।

स्रोत

2015-02-17 16:52:12

मैं jQuery के स्लाइडडाउन जैसे स्लाइड डाउन प्रभाव को कैसे प्राप्त कर सकता हूं, लेकिन केवल सीएसएस का उपयोग कर रहा हूं?

उत्तर

संबंधित मुद्दे