सीएसएस -3, बग रूपांतरण मेनू प्रदर्शित होने

अटक मैं इस प्लगइन transit.js कहा जाता है का उपयोग कर रहा एक सरल मेनू एनीमेशन बनाने के लिए और मूल रूप से मैं निम्नलिखित है मेनू, नीचे देखें मेनू इस प्रकार है: (। मैं माफी चाहता हूँ, बेला सिर्फ इस मुद्दे को पुन: नहीं है)सीएसएस -3, बग रूपांतरण मेनू प्रदर्शित होने

$('.main-header .nav-toggle-button').on('click' , function() { 

    // $('.main-header .navigation').toggleClass('show'); 

    if ($('.main-header .navigation').hasClass('show')) { 
     $('.main-header .navigation').stop().removeClass('show'); 
     return false; 
    } 

    $('.main-header .navigation').stop().transition({ 
      perspective: '1000px', 
      rotateY: '180deg', 
      duration : 0 
     }, function() { 
      $(this).addClass('show').stop().transition({ rotateY: '0' }); 
     }); 

    return false; 

});

DEMO HERE,

बग: तुम पास कोई एनीमेशन है पर देख सकते हैं, मेनू, चला जाता है अब इस बग तब होता है जब पेज, स्क्रॉल किया जाता है और अधिक से अधिक 200px+ और 992px चौड़ाई नीचे तो मूल रूप से जब आप हैमबर्गर पर क्लिक करें, मेनू खोलता है एक घुमावदार एनीमेशन के साथ, लेकिन जब आप हैमबर्गर पर फिर से क्लिक करें तो मेनू कभी-कभी बंद नहीं होता है, भले ही 'शो' क्लास को मेनू के रूप में हटा दिया गया हो।

यह इन बगों में से एक है जो कि मेरे बाहर है, कंसोल में निरीक्षण और जेएस कोड के माध्यम से जा रहा है, वास्तव में वास्तव में मदद नहीं की है।

मैं वास्तव में सराहना करता हूं कि कोई भी यह बता सकता है कि मैं यहां क्या कर रहा हूं, क्योंकि जेएस और सीएसएस वास्तव में सही दिखते हैं लेकिन पारगमन का उपयोग कर सीएसएस ट्रांसफॉर्म बस अपेक्षा के अनुरूप काम नहीं कर रहा है।

स्रोत

2016-04-17 Alexander Solonik

@ MarcosPérezGude "मोबाइल मोड" में क्रोम डाल दिया और आप ' दोषपूर्ण हैमबर्गर मिल जाएगा। –

आप मानते हैं कि मैं क्रोम का उपयोग करता हूं :), लेकिन ठीक है, अब मैं देख रहा हूं (विंडो आकार को कम करना) –

ऐसा लगता है कि यह क्रोम बग है। एक बार मेनू बंद हो जाने पर, यदि आप फोकस खो देते हैं, तो ब्राउज़र के बाहर क्लिक करते समय केवल गायब हो जाता है। बहुत अजीब। – Baro

जैसा कि पहले ही उल्लेख किया है, एक क्रोम बग प्रतीत हो रहा है मैं संपादन की कोशिश की अपने प्रदर्शन पर सीएसएस और इस समाधान लगता है डब्ल्यू के लिए

@media (max-width: 992px) 
.navigation { 
    display: none; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    right: 0; 
    background: #fff; 
    background: rgba(255,255,255,.95); 
    z-index: -1; // ADD THIS 
}

स्रोत

2016-04-20 12:34:07 Baro

मुझे लगता है कि अपनी गलती आप hover घटना का उपयोग कर जोड़ सकते हैं और एनीमेशन दूर करने के लिए, वह सिर्फ एक बार सक्रिय है कि अपने माउस तत्व खत्म हो गया है फिर से है जो:

/* dropdown */ 

    $('.navigation .dropdown-menu-item').hover(function() { 

     $('.navigation .dropdown-menu-item').find('.dropdown-menu-list').removeClass('opened'); 

     $(this).find('.dropdown-menu-list').stop().transition({ 'y' : '20px' , duration: 0 } , function() { 
     $(this).addClass('opened').stop().transition({ 'y': 0 }); 
     }); 

     return false; 

    }, function() { 

     $(this).find('.dropdown-menu-list').removeClass('opened'); 

    });

उपयोग mouseenter और mouseleave ईवेंट जोड़ने के लिए और ड्रॉपडाउन सूची एनीमेशन निकालने के लिए, इस तरह से तुम घटनाओं में से अधिक निकाल दिया और छोड़ दें:

$(document).on('.navigation .dropdown-menu-item', 'mouseenter', function(){ 
    $('.navigation .dropdown-menu-item').find('.dropdown-menu-list').removeClass('opened'); 
    $(this).find('.dropdown-menu-list').stop().transition({ 'y' : '20px' , duration: 0 } , function() { 
    $(this).addClass('opened').stop().transition({ 'y': 0 }); 
    }); 
    return false; 
}) 

$(document).on('.navigation .dropdown-menu-item', 'mouseleave', function(){ 
    $(this).find('.dropdown-menu-list').removeClass('opened'); 
})

स्रोत

2016-04-20 11:54:40

क्या आप समझ सकते हैं कि होवर के साथ क्या गलत है? –

वह एक बार आग लगाएगा, जब आपको माउस पर ऑब्जेक्ट में प्रवेश करने पर वास्तव में आग लगने की आवश्यकता होती है और जब वह –

छोड़ देता है तो होवर के बारे में दस्तावेज़ पढ़ें, जब आप प्रस्थान करते हैं, तो आप 2 फ़ंक्शन निर्दिष्ट कर सकते हैं। http://stackoverflow.com/questions/17589420/when-to-choose-mouseover-and-hover-function –

आपकी समस्या का एक वैकल्पिक समाधान ..

समस्या मैंने पाया छोटी स्क्रीन पर, है

, अपने मिनी मेनू: ork ... -1 यहाँ एक "z- सूचकांक" जोड़ने की कोशिश हैम्बर्गर आइकन पर क्लिक-क्लिक होता है। लेकिन हैमबर्गर आइकन पर फिर से क्लिक होने पर यह गायब नहीं होता है।

हालांकि, यदि आप खिड़की को स्क्रॉल करते हैं तो यह तुरंत गायब हो जाता है। इसलिए, मैंने if कथन के अंदर दो पंक्तियां जो वास्तव में विंडो 1px नीचे स्क्रॉल करती हैं और फिर 1px ऊपर (दस्तावेज़ की स्थिति को रखने के लिए) को स्क्रॉल करती हैं। अपने if कथन के अंदर निम्न कोड जोड़ें (return false; लाइन से पहले)।

window.scrollBy(0, 1); 
window.scrollBy(0, -1);

स्रोत

2016-04-24 05:55:42

यहां सीएसएस समाधान है ... यह आपके मेनू के साथ खोलने के लिए और अपने कोड और सीएसएस निम्नलिखित बंद सुचारू रूप से

जोड़ देगा ओवर-राइट

 @media(max-width:991px) { 
     .navigation { 
      transition: all 0.4s; 
      -webkit-transition: all 0.4s; 
      display: block; 
      transform: rotateY(90deg) !important; 
      -webkit-transform: rotateY(90deg) !important; 
      perspective: 1000px !important; 
      -webkit-perspective: 1000px !important; 
      opacity: 0; 
      visibility: hidden; 
     } 
     .navigation.show { 
      display: block; 
      opacity: 1; 
      transform: rotateY(0deg) !important; 
      -webkit-transform: rotateY(0deg) !important; 
      visibility: visible; 
     } 
    }

... आनंद लें

स्रोत

2016-04-26 06:43:13

सीएसएस -3, बग रूपांतरण मेनू प्रदर्शित होने

उत्तर

संबंधित मुद्दे