बूटस्ट्रैप 3 लटकती संक्रमण

Question

सबसे पहले यहां fiddle

बस एक नियमित रूप से बूटस्ट्रैप लटकती ताकि लटकती मंडराना (क्लिक के बजाय) पर दिखाई देता है, लेकिन कैसे मैं एक बहुत ही सरल फीका एनीमेशन चाहते हैं, मैं सीएसएस के लिए कुछ बदलाव किए हैं । मैंने सीएसएस संक्रमण की कोशिश की लेकिन यह काम नहीं किया क्योंकि .dropdown-menu तत्व में 'डिस्प्ले: कोई भी' लागू नहीं है, होवर पर यह 'डिस्प्ले: ब्लॉक' में बदल जाता है। मैं एक तत्व को एनिमेट कैसे करूं जो 'diplay: none' से 'display: block' में बदलता है या क्या यह प्राप्त करने के लिए कोई अन्य तरीका है?

मैंने पहले से ही इसे गुगल किया है और कुछ जवाब मिला है लेकिन उन्होंने मदद नहीं की है।

एचटीएमएल कोड:

<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 
    Dropdown 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
    <li role="presentation" class="divider"></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
    </ul> 
</div> 

सीएसएस कोड: आप भी अस्पष्टता का उपयोग कर रहे के बाद से, ब्लॉक:: 0 छिपाने के लिए के साथ प्रदर्शन से कोई भी:

.dropdown .dropdown-menu{ 
opacity: 0; 
transition:   all 400ms ease; 
-moz-transition: all 400ms ease; 
-webkit-transition: all 400ms ease; 
-o-transition:  all 400ms ease; 
-ms-transition:  all 400ms ease; 
} 
.dropdown:hover .dropdown-menu { 
    display: block; 
    opacity: 1; 
} 

Answer 1

आप प्रदर्शन के डिफ़ॉल्ट शैली ओवरराइड कर सकते हैं मेनू। निम्नलिखित सीएसएस को आज़माएं और देखें कि क्या आपको वह चाहिए जो आपको चाहिए। प्रभाव को और अधिक स्पष्ट बनाने के लिए मैंने संक्रमण की गति को अद्यतन किया है।

.dropdown .dropdown-menu{ 
    display: block; 
    opacity: 0; 

    -moz-transition: all 1000ms ease; 
    -webkit-transition: all 1000ms ease; 
    -o-transition:  all 1000ms ease; 
    -ms-transition:  all 1000ms ease; 
    transition:   all 1000ms ease; 
} 
.dropdown:hover .dropdown-menu { 
    display: block; 
    opacity: 1; 
} 

अपने बेला की

अद्यतन संस्करण: http://jsfiddle.net/pjej7o2m/1/

यहाँ एक jQuery स्क्रिप्ट div पर मँडरा

$(function(){ 
    var $menu = $('.dropdown-menu'); 

    $('.dropdown-toggle').hover(
    function() { 
     $menu.css('opacity',1); 
    }, 
    function() { 
     $menu.css('opacity',0); 
    }); 
})(); 

(अभी भी अस्पष्टता के लिए सीएसएस संक्रमण गुणों का उपयोग करके) के लिए एक विकल्प के रूप में काम कर सकते हैं है अद्यतन पहेली: http://jsfiddle.net/pjej7o2m/2/

Answer 2

.dropdown .dropdown-menu { 
    display: block; 
    visibility: hidden; 
    opacity: 0; 
    transition:   all 0.2s ease; 
    -moz-transition: all 0.2s ease; 
    -webkit-transition: all 0.2s ease; 
    -o-transition:  all 0.2s ease; 
    -ms-transition:  all 0.2s ease; 
} 
.dropdown:hover .dropdown-menu { 
    visibility: visible; 
    opacity: 1; 
} 
.dropdown { 
    display: inline-block; 
} 

बस display:block और visibility:hidden; से .dropdown .dropdown-menu { जोड़ें। फिर visibility: visible.dropdown:hover .dropdown-menu { जोड़ें और आप कर चुके हैं।

आपको दृश्यता बदलने की जरूरत है क्योंकि ड्रॉपडाउन मेनू की अस्पष्टता 0 है लेकिन यह अभी भी वहां है। आप इसे अपने बटन के नीचे घुमाकर देख सकते हैं। दृश्यता को बदलकर आपका ड्रॉपडाउन मेनू केवल तभी होगा जब आपका बटन आ जाए।