-webkit- प्रदर्शन के साथ संक्रमण

Question

display के साथ उपयोग करने का कोई तरीका है?

मैं सीएसएस display उपयोग कर रहा हूँ छिपाने के लिए और एक नेविगेशन दूसरे स्तर को दिखाने के लिए ... लेकिन केवल display: none और display: block:hover पर एक छोटे से अन-सेक्सी है ... एक ease बहुत अच्छा होगा (जैसे -webkit-transition: display 300ms ease-in;)

मुझे पता है कि काफी है jQuery के साथ ऐसा करने में आसान है, लेकिन मैं वर्तमान में CSS3 के साथ सबकुछ सेट करने की कोशिश कर रहा हूं (मुझे पता है: सभी ब्राउज़र इसका समर्थन नहीं करते हैं, लेकिन यह इस परियोजना के लिए अप्रासंगिक है जिसे मैं वर्तमान में काम कर रहा हूं)

यहां कुछ कोड है & संरचना: (li.menu1 मेंहैsection.nav-menu1 {display: block;} साथ)

<ul> 
    <li class="menu1"><a href="#">Menu 1</a> 
     <section class="nav-menu1"> 
      <h1 class="none">Level 2 Overlay</h1> 
      <nav> 
       <h2 class="none">Menu 1 Navigation</h2> 
       <ul> 
        <li><a href="#">Menu 1 Level 2-1</a></li> 
        <li><a href="#">Menu 1 Level 2-2</a></li> 
        <li><a href="#">Menu 1 Level 2-3</a></li> 
       </ul> 
      </nav> 
     </section> 
    </li> 
</ul> 

Answer 1

आपको दूसरे स्तर के मेनू को दिखाने और छिपाने के लिए height या width संक्रमण का उपयोग करना चाहिए। Display संपत्ति संक्रमण द्वारा समर्थित नहीं है।

ODC पर something similar पर आपकी ज़रूरतों के साथ एक लेख है। इसके अलावा, मेनू आइटम की तरह दिखने के लिए मेरे पास modified it a bit है। फ़ायरफ़ॉक्स 3.6.12 में संक्रमण के बिना ओपेरा 10.7 में सही काम करता है और क्रोम 7.0.517.41 में बिल्कुल नहीं है।

मुझे आशा है कि यह आपके अपने एनिमेटेड मेनू के लिए प्रारंभ बिंदु के रूप में उपयोगी होगा।

अद्यतन 1: Your menu with ease-in transitions। शायद, मुझे इसकी संरचना के बारे में कुछ गड़बड़ है। समस्या यह है कि संक्रमण auto के साथ काम नहीं करते हैं, इसलिए आपको अंतिम ऊंचाई मैन्युअल रूप से निर्दिष्ट करना होगा।

अद्यतन 2: संक्रमण संपत्ति के रूप में अस्पष्टता का उपयोग करें। अदृश्य तत्व सेट दृश्यता पर: छुपा और दृश्यता: दृश्यमान पर दृश्यमान। यह अदृश्य क्लिक करने योग्य लिंक से रोकेगा। इसके अलावा, दृश्यमान अदृश्य संक्रमण काम नहीं करता है, क्यों नहीं पता क्यों। इसे और अधिक काम करना है।

Example।

Answer 2

आप एक अस्पष्टता संक्रमण, इस के लिए नहीं एक प्रदर्शन संक्रमण का उपयोग करना चाहिए। प्रदर्शन: कोई भी लेआउट से पूरी तरह से तत्व को हटा देता है - मुझे लगता है कि आप इसे वहां चाहते हैं, लेकिन अदृश्य।

Answer 3

तो मुझे यकीन नहीं है कि मैं यहां सभी टुकड़ों को एक साथ रखता हूं। आप अस्पष्टता और दृश्यता को एनिमेट करना चाहते हैं, दृश्यता में देरी होने के साथ ही ट्रिगर होने से पहले अस्पष्टता की जाती है;

opacity: 0; 
-moz-transition: opacity .25s linear, visibility .1s linear .5s; 
-webkit-transition: opacity .25s linear, visibility .1s linear .5s; 
-o-transition: opacity .25s linear, visibility .1s linear .5s; 
transition: opacity .25s linear, visibility .1s linear .5s; 
visibility: hidden; 

opacity: 1; 
visibility: visible; 

के लिए दृश्यता .5s प्रतीक्षा करें और फिर छिपा में परिवर्तित कर देगा। यदि आप इसे दोनों तरीकों से फीका करना चाहते हैं तो आप एक तरफ दृश्यता संक्रमण को भी बंद कर सकते हैं। (ताकि जब लुप्त हो जाए, तो तत्व प्रतीक्षा करने के बजाए तुरंत दिखाई देगा .5s और संक्रमण।)

Answer 4

उपयोग overflow:hidden > overflow:visible, बेहतर काम करता है, मैं इस तरह का उपयोग करें:

example { 
#menu ul li ul { 

    background-color:#fe1c1c; 
    width:85px; 
    height:0px; 
    opacity:0; 
    box-shadow:1px 3px 10px #000000; 
    border-radius:3px; 
    z-index:1; 
    -webkit-transition:all 0.5s ease; 
    -moz-transition:all 0.6s ease; 

} 

#menu ul li:hover ul { 

     overflow:visible; 
    opacity:1; 
    height:140px; 
} 

दिखाई तुलना में बेहतर है क्योंकि overflow:hidden वास्तव में एक display:none की तरह अधिनियम,