jQuery की स्लाइड के समान प्रभाव कैसे प्राप्त करें सीएसएस 3 संक्रमणों का उपयोग करके टॉगल करें?

Question

मैं jQuery स्लाइड टॉगल प्रभाव चाहता हूं लेकिन आईओएस डिवाइस पर जीपीयू का आह्वान करने के लिए CSS3 संक्रमण का उपयोग करना चाहता हूं ताकि संक्रमण आसान हो।

Answer 1

आप height, padding और border-width को परिवर्तित करके इसे प्राप्त कर सकते हैं। यहाँ एक उदाहरण है:

$('.run-css').click(function() { 
 
    $('.cont').toggleClass('toggled'); 
 
});

.cont { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px #CCC solid; 
 
    background-color: #EEE; 
 
    padding: 5px; 
 
    -webkit-transition: height .3s linear, padding-top .3s linear, padding-bottom .3s linear, border-top-width .3s linear, border-top-width .3s linear; 
 
    transition: height .3s linear, padding-top .3s linear, padding-bottom .3s linear, border-top-width .3s linear, border-top-width .3s linear; 
 
} 
 
.toggled { 
 
    overflow: hidden; 
 
    padding-top: 0; 
 
    padding-bottom: 0; 
 
    height: 0; 
 
    border-width: 0 1px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<button class="run-css">CSS slideToggle</button> 
 

 
<div class="cont">Toggle this div</div>

Answer 2

मेरा मानना ​​है कि Animatable चाल चलाना चाहिए। यह एक सीएसएस संक्रमण ढांचा है, और हालांकि मैं आईओएस विकास नहीं करता हूं, ली लेरो का उल्लेख है कि वह आईओएस के लिए एफएफ और क्रोम पर इसका परीक्षण करती है।

अन्य सीएसएस एनीमेशन पुस्तकालय हैं, जैसे move.js जो सीएसएस संक्रमण और जावास्क्रिप्ट का उपयोग करते हैं।

Answer 3

क्षमा करें, लेकिन इस CSS3 के द्वारा समर्थित नहीं है जब तक आप सटीक ऊंचाई पता है। 0 और ऑटो के बीच एनिमेट करने का कोई तरीका नहीं है। यदि आपको सटीक ऊंचाई पता है, तो आप यहां कुछ संक्रमण कोड उत्पन्न कर सकते हैं: http://css3generator.com/

Answer 4

सच है, आप 0 और ऑटो ऊंचाई के बीच एनिमेट नहीं कर सकते हैं, लेकिन आप वास्तव में अधिकतम ऊंचाई को टॉगल कर सकते हैं।

अधिकतम ऊंचाई के बीच टॉगल (जेएस के माध्यम से): 0 और अधिकतम ऊंचाई: 1000 पीएक्स और आपको प्राप्त परिणाम मिलेगा, हालांकि यह jQuery की स्लाइड टॉगल फ़ंक्शन के रूप में काफी चिकनी नहीं होगा।

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

Answer 5

.container { 
    overflow-y: hidden; 
    max-height: 0; 

    transition: max-height 0.5s ease; 
} 
.container.open { 
    max-height: 1000px; /* approx */ 
}