बच्चे तत्व के लिए होवर पर सीएसएस संक्रमण

Question

मैं बच्चे के तत्व के प्रदर्शन को रोकने की कोशिश कर रहा हूं जब यह अभिभावक है।

एचटीएमएल:

<span> 
    <div>This Is The Child</div> 
    Some Text in the span 
</span> 

Css:

span { 
    position: relative; 
} 
span div { 
    display: none; 
    width: 0px; 
    opacity: 0; 

    transition: width 5s; 
    -webkit-transition: width 5s; 

    transition: opacity 5s; 
    -webkit-transition: opacity 5s; 
} 
span:hover div { 
    display: inline-block; 
    width: 150px; 
    opacity: 1; 
}​ 

अभी, जब काल hovered है के रूप में, div कोई देरी होने से पहले ही दिखाया गया है है। मैं इसे ठीक करने के बारे में कैसे जाउंगा तो एक विराम है?

यहाँ फिडल: http://jsfiddle.net/SReject/vmvdK/

कुछ नोट:
मैं मूल रूप से प्रदर्शन संक्रमण के लिए कोशिश की, लेकिन के रूप में एडवर्ड ने कहा, यह संभव नहीं है, और भावना से ऊपर है, जो भी, 'isn की कोशिश की है टी काम कर

ऐसा लगता है कि किसी भी "प्रदर्शन" संपत्ति "संक्रमण के लिए" स्टाइल किसी भी संक्रमण एनिमेशन होने से बंद हो जाएगा हल किया। इस के आसपास काम करने के लिए। मैंने 0px पर प्रदर्शित होने के लिए बच्चे की चौड़ाई निर्धारित की है और यह पूरी तरह से पारदर्शी है। तब में स्टाइल, मैं सही चौड़ाई सेट, और div ठोस बनाने के "संक्रमण के लिए":

एचटीएमएल:

<span> 
    <div>This Is The Child</div> 
    Some Text in the span 
</span> 

Css:

span { 
    position: relative; 
} 
span div { 
    position: absolute; 

    width: 0px; 
    opacity: 0; 
    transition: opacity 5s; 
    -webkit-transition: opacity 5s; 
} 
span:hover div { 
    width: 150px; 
    opacity: 1; 
}​ 

फिडल यहाँ: http://jsfiddle.net/SReject/vmvdK/

Answer 1

this article के अनुसार सीएसएस संक्रमण पर, जिसे MDN page on CSS transitions द्वारा संदर्भित किया गया है, display संपत्ति ट्रांजिट नहीं हो सकती है ioned:

कई गुण या मान आप संक्रमण के लिए चाहता हूँ नहीं है, लेकिन जो दोनों unspecced और लेखन के समय समर्थित नहीं हैं:

• background-image, ढ़ाल
• सहित ...
• कोई भी और कुछ और के बीच display

तो transition: display 5s; प्रॉपर्टी को div पर लागू करने का कोई प्रभाव नहीं पड़ता है।

संपादित करें:

अपने अपडेट किए गए कोड के आधार पर, आप अस्पष्टता के साथ प्रभाव आप चाहते हैं को प्राप्त करने और जब तक आप display संपत्ति निर्दिष्ट नहीं करते के रूप में चौड़ाई कर सकते हैं। सीधे शब्दों में लाइन

display: none; 

span div अनुभाग से निकाल सकते हैं और जब आप इसे पर ले जाएं, पॉप-अप मेनू बदलाव आपके द्वारा निर्दिष्ट का उपयोग करेगा।

के बाद से display:inline-block करने के लिए display:none; से संक्रमण ऐनिमेटेड नहीं होनी चाहिए, इस संपत्ति शायद ही संक्रमण के अंत में बदल गया है - तो अस्पष्टता एनिमेट जबकि div अभी भी अदृश्य है।

Answer 2

क्या आपने -webkit-transition-delay: ; का उपयोग करने का प्रयास किया है? यदि नहीं, तो यह कुछ ऐसा हो सकता है जिसे आप ढूंढ रहे हैं?

कोड में कुछ बदलाव किया:

span div { 
position: absolute; 
left: 5px; 
top: 5px; 
border: 1px solid #000; 
background-color: #888; 
width: 0px; 
opacity: 0; 
cursor: pointer; 

}

span:hover div { 
display: inline-block; 
-webkit-transition-delay: 2s; 
width: 150px;    
opacity: 1; 

}

और यहाँ एक demo