सीएसएस संक्रमण जब तक कि मैं समय समाप्ति

Question

मैं वर्गों की एक जोड़ी का उपयोग काम नहीं करते: hidedisplay: none है, और transparentopacity: 0 है। तत्व pr_container में -webkit-transition: opacity 1s है। निम्नलिखित JQuery आधारित कोड एक तत्व एक एनिमेटेड fasion में दिखाई देता है: जब मैं setTimeout हटाने और बजाय सिर्फ द्वितीय श्रेणी को हटा दें,

pr_container.removeClass("hide"); 
setTimeout(function() { pr_container.removeClass("transparent"); }, 0); 

हालांकि, इसमें कोई एनीमेशन है। क्यूं कर?

संपादित करें: मैं नवीनतम क्रोम का उपयोग कर रहा हूं, मैंने अभी तक अन्य ब्राउज़रों की जांच नहीं की है।

संपादित करें: मैंने दोनों कॉल को उसी setTimeout कॉलबैक में डालने का प्रयास किया - कोई एनीमेशन नहीं। तो यह अलगाव के बारे में स्पष्ट रूप से है।

संपादित करें: यहाँ jsFiddle है: http://jsfiddle.net/WfAVj/

Answer 1

यदि आप एक ही समय में display संपत्ति बदल रहे हैं एक संक्रमण नहीं कर सकता। तो इसे काम करने के लिए आपको अपने तत्व को किसी अन्य तरीके से छिपाना होगा। उदाहरण के लिए:

.hide { 
    height: 0; 
    width: 0; 
    /* overflow: hidden; padding: 0; border: none; */ 
} 

http://jsfiddle.net/dfsq/WfAVj/1/

Answer 2

केवल "transperent" वर्ग उत्पादन एनीमेशन .. "छिपाएँ" तत्काल है। तो एनीमेशन शुरू करने और यदि "छिपाएँ" की जरूरत 1 सेकंड के बाद:

test.addClass("transparent"); 
//hide after 1 sec, when the animation is done 
setTimeout(function() {test.addClass("hide"); }, 1000); //1000ms = 1sec 

http://jsfiddle.net/WfAVj/4/

Answer 3

कोई उचित "curve" पारगमन के लिए एक display स्थिति से दूसरे, इसलिए ब्राउज़रों के वर्तमान कार्यान्वयन में है, किसी भी संक्रमण कि किसी भी तरह display शामिल है, बिना किसी संक्रमण के समाप्त हो जाएगा।

इस कोड के साथ

:

pr_container.removeClass("hide"); 
pr_container.removeClass("transparent"); 

आप कल्पना कर सकते दो बयान, एक भी "अवरुद्ध" कतार में अमल तो ब्राउज़रों व्यावहारिक रूप से class="hide transparent" से class="" के तत्व प्रस्तुत हुई है, और ऊपर कहा गया है के रूप में, hide वर्ग व्यावहारिक रूप से किसी मौजूदा संक्रमण को अमान्य कर देता है।

pr_container.removeClass("hide"); 
setTimeout(function() { pr_container.removeClass("transparent"); }, 0); 

का उपयोग करके आप "एक ही कतार में नहीं जितनी जल्दी हो सके, लेकिन" "पारदर्शी" वर्ग दूर करने के लिए ब्राउज़र को बताया, तो ब्राउज़र पहले "छिपाएँ" को हटा, और फिर आगे बढ़ता रहता है। "पारदर्शी" को हटाने पर तब होता है जब ब्राउज़र सोचता है कि इसमें संसाधन को छोड़ना है, इस प्रकार संक्रमण को अमान्य नहीं किया जाता है।

Answer 4

जुड़ा हुआ प्रश्न में दिए गए सुझावों का उपयोग करके, मैं एक संस्करण है कि मैं से संतुष्ट हूँ बनाया:

.test { 
    -webkit-transition: visibility 1s, opacity 1s; 
} 

.hide { 
    visibility: hidden; 
} 

.transparent { 
    opacity: 0; 
} 

http://jsfiddle.net/xKgjS/

संपादित करें: अब दो वर्गों भी एक के लिए जोड़ा जा सकता है!

सभी के लिए धन्यवाद!