आप इसे प्राकृतिक तरीके से अपेक्षित काम करने के लिए प्राप्त कर सकते हैं - प्रदर्शन का उपयोग करके - लेकिन आपको इसे प्राप्त करने के लिए ब्राउज़र को थ्रॉटल करना होगा, या तो जावास्क्रिप्ट का उपयोग करके या जैसा कि दूसरों ने एक दूसरे के अंदर एक टैग के साथ एक फैंसी चाल का सुझाव दिया है। मैं आंतरिक टैग की परवाह नहीं करता क्योंकि यह सीएसएस और आयामों को और अधिक जटिल करता है, इसलिए यहां जावास्क्रिप्ट समाधान है:
https://jsfiddle.net/b9chris/hweyecu4/17/
बॉक्स के साथ शुरू करना जैसे:
<div id="box" class="hidden">Lorem</div>
एक छुपा हुआ डब्बा।
div.hidden {
display: none;
}
#box {
transition: opacity 1s;
}
हम संबंधित q / a में पाए जाने वाले ट्रिक का उपयोग करने जा रहे हैं, ब्राउज़र की तुरंत जांच करने के लिए ऑफ़सेट की जाँच कर रहे हैं:
https://stackoverflow.com/a/16575811/176877
सबसे पहले, उपरोक्त चाल को औपचारिक रूप देने वाला एक पुस्तकालय:
$.fn.noTrnsn = function () {
return this.each(function (i, tag) {
tag.style.transition = 'none';
});
};
$.fn.resumeTrnsn = function () {
return this.each(function (i, tag) {
tag.offsetHeight;
tag.style.transition = null;
});
};
अगला, हम एक बॉक्स को प्रकट करने के लिए इसका उपयोग करने जा रहे हैं, और इसे इसमें फीका कर सकते हैं:
$('#button').on('click', function() {
var tag = $('#box');
if (tag.hasClass('hidden'))
tag.noTrnsn().removeClass('hidden')
.css({ opacity: 0 })
.resumeTrnsn().css({ opacity: 1 });
else
tag.css({ opacity: 0 });
});
यह बॉक्स को अंदर और बाहर फेकता है। इसलिए, .noTrnsn()संक्रमण को बंद कर देता है, फिर हम उस hiddenवर्ग को हटा देते हैं , जो अपने डिफ़ॉल्ट displayसे फ़्लिप करता है । फिर हम 0 में अस्पष्टता सेट करते हैं ताकि आप फ़ेडिंग के लिए तैयार हो सकें। अब जब हमने स्टेज सेट कर लिया है, तो हम बदलावों को वापस चालू करते हैं । और अंत में, अपारदर्शिता को 1 पर सेट करके संक्रमण को किक करें।noneblock.resumeTrnsn()
पुस्तकालय के बिना, प्रदर्शन में परिवर्तन और अपारदर्शिता में परिवर्तन से हमें अवांछनीय परिणाम प्राप्त होंगे। यदि हमने लाइब्रेरी कॉल को केवल हटा दिया है, तो हमें कोई संक्रमण नहीं होगा।
ध्यान दें कि उपर्युक्त फ़ेडआउट एनीमेशन के अंत में फिर से कोई भी प्रदर्शित नहीं करता है। हम हालांकि कट्टरपंथी हो सकते हैं। आइए एक के साथ ऐसा करें कि 0 से बढ़ता है और बढ़ता है।
फैंसी!
https://jsfiddle.net/b9chris/hweyecu4/22/
#box {
transition: height 1s, opacity 1s;
}
अब हम ऊंचाई और अपारदर्शिता दोनों को बदल रहे हैं। नोट हम, ऊंचाई, जो यह डिफ़ॉल्ट है इसका मतलब है की स्थापना नहीं कर रहे हैं कि auto। परंपरागत रूप से यह संक्रमण नहीं किया जा सकता है - ऑटो से पिक्सेल मूल्य (जैसे 0) पर जाने से आपको कोई संक्रमण नहीं मिलेगा। हम लाइब्रेरी के साथ, और एक और लाइब्रेरी विधि के साथ काम करने जा रहे हैं:
$.fn.wait = function (time, fn) {
if (time)
this.delay(time);
if (!fn)
return this;
var _this = this;
return this.queue(function (n) {
fn.call(_this);
n();
});
};
यह एक सुविधा विधि है जो हमें jQuery के मौजूदा fx / एनीमेशन कतार में भाग लेने की सुविधा देती है, बिना किसी एनीमेशन ढांचे की आवश्यकता के जो अब jQuery 3.x में बाहर रखा गया है। मैं यह समझाने नहीं जा रहा हूं कि jQuery कैसे काम करता है, लेकिन यह कहना पर्याप्त है, .queue()और .stop()jQuery प्रदान करता है जो हमें एक दूसरे पर कदम रखने से हमारे एनिमेशन को रोकने में मदद करता है।
आइए स्लाइड डाउन इफेक्ट को चेतन करें।
$('#button').on('click', function() {
var tag = $('#box');
if (tag.hasClass('hidden')) {
// Open it
// Measure it
tag.stop().noTrnsn().removeClass('hidden').css({
opacity: 0, height: 'auto'
});
var h = tag.height();
tag.css({ height: 0 }).resumeTrnsn()
// Animate it
.css({ opacity: 1, height: h })
.wait(1000, function() {
tag.css({ height: 'auto' });
});
} else {
// Close it
// Measure it
var h = tag.noTrnsn().height();
tag.stop().css({ height: h })
.resumeTrnsn()
// Animate it
.css({ opacity: 0, height: 0 })
.wait(1000, function() {
tag.addClass('hidden');
});
}
});
इस कोड की जाँच शुरू होती है #boxऔर क्या यह वर्तमान में छिपा हुआ है, इसकी कक्षा पर जाँच करके। लेकिन यह wait()लाइब्रेरी कॉल का उपयोग करके अधिक पूरा करता है , hiddenस्लाइडआउट / फीका एनीमेशन के अंत में कक्षा को जोड़कर , जिसे आप यह खोजने की उम्मीद करेंगे कि क्या यह वास्तव में छिपा हुआ है - उपरोक्त सरल उदाहरण कुछ नहीं कर सकता है। यह तत्व को बार-बार छिपाने / छिपाने में सक्षम करता है, जो पिछले उदाहरण में एक बग था, क्योंकि छिपे हुए वर्ग को कभी भी बहाल नहीं किया गया था।
आप सीएसएस और वर्ग परिवर्तन भी देख सकते हैं जिसे .noTrnsn()आम तौर पर एनिमेशन के लिए चरण निर्धारित करने के बाद बुलाया जा रहा है , जिसमें माप लेना शामिल है, जैसे कि माप, #boxउपयोगकर्ता को कॉल करने से पहले .resumeTrnsn()यह दिखाने के बिना कि अंतिम ऊंचाई क्या होगी , और इसे पूरी तरह से सेट से एनिमेट करना सीएसएस मूल्यों को अपने लक्ष्य के लिए मंच।
पुराना उत्तर
https://jsfiddle.net/b9chris/hweyecu4/1/
आप इसे क्लिक से बदल सकते हैं:
function toggleTransition() {
var el = $("div.box1");
if (el.length) {
el[0].className = "box";
el.stop().css({maxWidth: 10000}).animate({maxWidth: 10001}, 2000, function() {
el[0].className = "box hidden";
});
} else {
el = $("div.box");
el[0].className = "box";
el.stop().css({maxWidth: 10001}).animate({maxWidth: 10000}, 50, function() {
el[0].className = "box box1";
});
}
return el;
}
someTag.click(toggleTransition);
CSS वह है जो आप अनुमान लगाएंगे:
.hidden {
display: none;
}
.box {
width: 100px;
height: 100px;
background-color: blue;
color: yellow;
font-size: 18px;
left: 20px;
top: 20px;
position: absolute;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: scale(.2);
transform: scale(.2);
-webkit-transition: transform 2s;
transition: transform 2s;
}
.box1{
-webkit-transform: scale(1);
transform: scale(1);
}
कुंजी प्रदर्शन गुण को थ्रॉटलिंग कर रही है। छिपा वर्ग को हटाने और फिर 50 एमएस इंतजार कर, तक तो करने के जोड़ा वर्ग के माध्यम से संक्रमण शुरू करने के बाद, हम इसे प्रकट करना चाहते हैं और फिर जैसा हम चाहते थे, इसके बजाय इसका विस्तार करें, इसके बिना स्क्रीन पर बिना किसी एनीमेशन के चमक रहा है। इसी तरह से दूसरे तरीके से जाना होता है, जब तक कि हम छिपे हुए को लागू करने से पहले एनीमेशन खत्म होने तक इंतजार करते हैं।
नोट: मैं दौड़ की स्थिति .animate(maxWidth)से बचने के लिए यहाँ दुर्व्यवहार कर रहा हूँ setTimeout। setTimeoutजब आप या कोई और इससे अनजान कोड उठाता है, तो छिपे हुए बग को पेश करने की जल्दी होती है। .animate()आसानी से मारा जा सकता है .stop()। मैं इसका उपयोग मानक fx कतार में 50 ms या 2000 ms देरी करने के लिए कर रहा हूँ, जहाँ इसके शीर्ष पर अन्य कोडर्स बिल्डिंग द्वारा इसे खोजना / हल करना आसान है।