Come posso evitare che un menu di navigazione reattivo (attivato da una transizione CSS3) si animi quando diventano attive diverse query multimediali?

Question

Prefazione

Sto cercando di creare un sito web reattivo con un menu di navigazione che soddisfa i due requisiti seguenti:

1. navigazione è completamente visibile in una finestra del browser normale, disposti orizzontalmente.
2. La navigazione diventa un menu verticale selezionabile per dispositivi mobili e schermi piccoli, che si anima tra lo stato "aperto" e "chiuso".

Desidero che le prestazioni siano buone sui dispositivi mobili, soprattutto su iOS, il che significa che l'animazione deve utilizzare una transizione CSS GPU-accelerated translate3d transform.

mio problema

Mettere in piedi è stato un pezzo di torta, e per la maggior parte funziona benissimo. Ho usato z-index: 1 e transform: translate3d(0,-100%,0) per nascondere il menu dietro un'intestazione con z-index: 2 nel suo stato chiuso predefinito e quindi transform: translate3d(0,0,0) per animare il menu al suo stato aperto.

Ma sto riscontrando un solo problema: Quando ridimensiono la finestra del browser Chrome e la query media mobile viene attivata, il menu si anima da uno stato aperto a uno chiuso.

ridimensionare la finestra del browser per meno di 600px di larghezza di vedere il problema in azione:

• jsfiddle a tutto schermo: http://fiddle.jshell.net/ymDYG/1/show/
• jsfiddle originale: http://jsfiddle.net/ymDYG/1/

Credo di sapere perché questo sta succedendo: quando interviene la query media mobile, il browser vede che .nav non è attualmente attivo, quindi lo anima allo stato di chiusura predefinito. Ho provato a utilizzare display:none e display:block per i diversi stati delle query multimediali, ma sembra che interrompa completamente l'animazione.

Come è possibile impedire l'attivazione dell'animazione di "chiusura" del menu di navigazione durante il ridimensionamento della finestra del browser?

Answer 1

Bel lavoro, molto pulito. Posso rubarlo? :-)

In ogni caso, ecco la soluzione con uno demo.

Ho appena spostato il passaggio ad un'altra classe:

.nav { 
    /* stuff */ 
    z-index: 1; 
    transform: translate3d(0,-100%,0); 
    -webkit-transform: translate3d(0,-100%,0); 
} 
.nav.active { 
    transform: translate3d(0,0,0); 
    -webkit-transform: translate3d(0,0,0); 
} 
.nav.activated { 
    transition: transform 400ms linear; 
    -webkit-transition: -webkit-transform 400ms linear; 
} 

che è possibile aggiungere l'elemento in un primo momento "Toggle":

function toggle(){ 
    $(".nav").addClass("activated").toggleClass("active"); 
} 

---

P.S.Se non si desidera che la transizione verso accadere anche dopo che l'utente ha aperto il menu e poi ridimensionata nuovamente la finestra, si potrebbe usare di Modernizr mq method:

$(window).on('resize',function(){ 
    if(Modernizr.mq('(min-width:600px)')) $(".nav").removeClass("activated"); 
}); 

Answer 2

Riferendosi al effetto collaterale che Giona citato:

PS Se non si desidera che la transizione avvenga anche dopo che l'utente ha aperto il menu e poi ridimensionata di nuovo la finestra (...)

c'è un modo più pulito per risolvere questo problema senza sparare su ogni evento ridimensionare. È possibile rimuovere il resposible classe per la transizione dopo la fine di transizione (demo completa here):

$(function() 
    { 
    $(".nav").on("transitionend", function() { 
     $(this).removeClass("activated"); 
    }); 
    } 
)();