CSS-3 Transform bug, menu che appare bloccato

Question

Sto usando questo plugin chiamato transit.js per creare una semplice animazione di menu e in fondo ho il seguente menu, vedere di seguito:

Il codice per l'apertura e la chiusura di il menu è la seguente: (. mi dispiace, il violino solo non ricrea questo problema)

$('.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,

BUG: Come puoi vedere da vicino non c'è animazione, il menu scompare, ora questo errore si verifica quando la pagina scorre più di 200px+ e sotto la larghezza 992px, quindi in sostanza quando fai clic sull'hamburger , il menu si apre con una rotazione dell'animazione ma quando fai clic di nuovo sull'hamburger, il menu a volte non si chiude anche se la classe 'show' è stata rimossa dal menu.

Questo è uno di questi bug che è appena al di là di me, l'ispezione nella console e il codice JS non è stato di grande aiuto.

Sarei davvero grato se qualcuno possa indicare cosa sto facendo male qui, dato che il JS e il CSS sembrano davvero perfetti ma le trasformazioni di css usando il transito non funzionano come previsto.

Answer 1

Come già accennato sembra essere un bug Chrome, ho provato a modificare il CSS sul tuo demo e questa soluzione sembra a w ork ... provare ad aggiungere un "z-index" a -1 qui:

@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 
} 

Answer 2

penso che l'errore è che si sta utilizzando l'evento hover per aggiungere e rimuovere l'animazione, ha appena il fuoco una volta che il mouse si trova sopra l'elemento:

/* 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'); 

    }); 

Usa mouseenter e mouseleave eventi da aggiungere e rimuovere l'animazione elenco a discesa, in questo modo hai intenzione di avere gli eventi cotto ad oltre e lasciare:

$(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'); 
}) 

Answer 3

Una soluzione alternativa al problema ..

Il problema che ho trovato è, su schermi più piccoli, il vostro mini-menù appare su-clic dell'icona di hamburger. Ma non scompare quando si fa nuovamente clic sull'icona dell'hamburger.

Tuttavia, scompare immediatamente se si scorre la finestra. Quindi, ho aggiunto due righe all'interno dell'istruzione if che effettivamente scorre verso il basso la finestra 1px e quindi su 1px (per mantenere la stessa posizione del documento). Aggiungere il seguente codice all'interno della dichiarazione if (prima della riga return false;).

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

Answer 4

Ecco la soluzione css ... con questo menu si apre e si chiude senza problemi

add seguente CSS per il codice e over-Wright

 @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; 
     } 
    } 

Enjoy ...