Css संक्रमण ब्लॉक, subnav

Question

साथ नेविगेशन प्रदर्शित करने के लिए यह वह जगह है जो मैं jsFiddle link

nav.main ul ul { 
 
    position: absolute; 
 
    list-style: none; 
 
    display: none; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    padding: 10px; 
 
    background-color: rgba(92, 91, 87, 0.9); 
 
    -webkit-transition: opacity 600ms, visibility 600ms; 
 
      transition: opacity 600ms, visibility 600ms; 
 
} 
 

 
nav.main ul li:hover ul { 
 
    display: block; 
 
    visibility: visible; 
 
    opacity: 1; 
 
}

<nav class="main"> 
 
    <ul> 
 
     <li> 
 
      <a href="">Lorem</a> 
 
      <ul> 
 
       <li><a href="">Ipsum</a></li> 
 
       <li><a href="">Dolor</a></li> 
 
       <li><a href="">Sit</a></li> 
 
       <li><a href="">Amet</a></li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</nav>

है क्यों वहाँ कोई संक्रमण है? अगर मैं

nav.main ul li:hover ul { 
    display: block; 
    visibility: visible; 
    opacity: 0; /* changed this line */ 
} 

फिर "सबनाव" कभी नहीं दिखाई देगा (बिल्कुल) लेकिन अस्पष्टता पर संक्रमण क्यों ट्रिगर नहीं करता है? संक्रमण कैसे काम करें?

Answer 1

जैसा कि आप जानते हैं कि display संपत्ति एनिमेटेड नहीं हो सकती है लेकिन बस इसे अपने सीएसएस में रखने से यह visibility और opacity संक्रमणों को ओवरराइड करता है।

समाधान ... बस display गुण हटा दिए गए।

nav.main ul ul { 
 
    position: absolute; 
 
    list-style: none; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    padding: 10px; 
 
    background-color: rgba(92, 91, 87, 0.9); 
 
    -webkit-transition: opacity 600ms, visibility 600ms; 
 
    transition: opacity 600ms, visibility 600ms; 
 
} 
 
nav.main ul li:hover ul { 
 
    visibility: visible; 
 
    opacity: 1; 
 
}

<nav class="main"> 
 
    <ul> 
 
    <li> 
 
     <a href="">Lorem</a> 
 
     <ul> 
 
     <li><a href="">Ipsum</a> 
 
     </li> 
 
     <li><a href="">Dolor</a> 
 
     </li> 
 
     <li><a href="">Sit</a> 
 
     </li> 
 
     <li><a href="">Amet</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 2

आप एनीमेशन-फ़्रेम के बजाय संक्रमण के साथ ऐसा कर सकते हैं। अपने होवर घोषणा को बदलें और एनीमेशन कीफ्रेम जोड़ें, आपको -मोज़- और -webkit- के लिए ब्राउज़र उपसर्ग जोड़ने की भी आवश्यकता हो सकती है। अधिक विस्तृत जानकारी के लिए https://developer.mozilla.org/en/docs/Web/CSS/@keyframes देखें।

nav.main ul li:hover ul { 
    display: block; 
    visibility: visible; 
    opacity: 1; 
    animation: fade 1s; 
} 

@keyframes fade { 
    0% { 
     opacity: 0; 
    } 

    100% { 
     opacity: 1; 
    } 
} 

यहां आपके पहेली पर एक अपडेट है। https://jsfiddle.net/orax9d9u/1/

Answer 3

आम तौर पर जब लोग display: none चेतन करने के लिए क्या वे वास्तव में चाहते कोशिश कर रहे हैं: में

1. फीका सामग्री, और
2. आइटम नहीं जब छिपा हुआ दस्तावेज़ में स्थान ले लो

सबसे लोकप्रिय उत्तर visibility का उपयोग करते हैं, जो केवल पहले लक्ष्य को प्राप्त कर सकते हैं, लेकिन सौभाग्य से यह position का उपयोग करके दोनों को हासिल करना आसान है।

position: absolute के बाद से निकाल देता है दस्तावेज़ प्रवाह रिक्ति टाइपिंग से तत्व, आप position: absolute और position: static (वैश्विक डिफ़ॉल्ट) के बीच टॉगल कर सकते हैं, opacity के साथ संयुक्त। नीचे उदाहरण देखें।

.content-page { 
 
    position:absolute; 
 
    opacity: 0; 
 
} 
 

 
.content-page.active { 
 
    position: static; 
 
    opacity: 1; 
 
    transition: opacity 1s linear; 
 
}