-webkit-transition con display

Question

C'è un modo per utilizzare -webkit-transition con display?

sto usando i CSS display per nascondere e mostrare un navigazioni secondo livello ... ma solo display: none e display: block su :hover è un po 'non-sexy ... un ease sarebbe grande (come -webkit-transition: display 300ms ease-in;)

so che è abbastanza facile farlo con jQuery, ma attualmente sto cercando di impostare tutto con CSS3 (lo so: non tutti i browser lo supportano, ma è irrilevante per questo progetto al momento sto lavorando)

ecco qualche codice & struttura: (il li.menu1 ha un :hover con section.nav-menu1 {display: block;})

<ul> 
    <li class="menu1"><a href="#">Menu 1</a> 
     <section class="nav-menu1"> 
      <h1 class="none">Level 2 Overlay</h1> 
      <nav> 
       <h2 class="none">Menu 1 Navigation</h2> 
       <ul> 
        <li><a href="#">Menu 1 Level 2-1</a></li> 
        <li><a href="#">Menu 1 Level 2-2</a></li> 
        <li><a href="#">Menu 1 Level 2-3</a></li> 
       </ul> 
      </nav> 
     </section> 
    </li> 
</ul> 

Answer 1

È necessario utilizzare la transizione height o width per visualizzare e nascondere il menu di secondo livello. La proprietà Display non è supportata dalle transizioni.

C'è un articolo allo ODC con something similar per le vostre esigenze. Inoltre, ho modified it a bit per avere un aspetto più simile alla voce di menu. Funziona perfettamente in Opera 10.7, senza transizioni in Firefox 3.6.12 e non funziona affatto in Chrome 7.0.517.41.

Spero che questo sia utile come punto di partenza per il tuo menu animato.

Aggiornamento 1: Your menu with ease-in transitions. Probabilmente, ho qualcosa di sbagliato riguardo alla sua struttura. Il problema è che le transizioni non funzionano con auto, quindi devi specificare manualmente l'altezza finale.

Aggiornamento 2: Utilizzare l'opacità come proprietà di transizione. Sulla visibilità del set di elementi invisibili: nascosti e visibilità: visibili sul visibile. Ciò impedirà collegamenti invisibili cliccabili. Inoltre, la transizione visibile-invisibile non funziona, non so perché. Devo lavorare di più su di esso.

Example.

Answer 2

Si dovrebbe usare una transizione opacità, non una transizione di visualizzazione per questo. Display: none rimuove completamente un elemento dal layout - penso che lo vuoi lì, ma invisibile.

Answer 3

Quindi non sono sicuro di vedere tutti i pezzi messi insieme qui. Vuoi animare l'opacità e la visibilità, con la visibilità che ha un ritardo in modo che l'opacità sia fatta prima che si inneschi;

opacity: 0; 
-moz-transition: opacity .25s linear, visibility .1s linear .5s; 
-webkit-transition: opacity .25s linear, visibility .1s linear .5s; 
-o-transition: opacity .25s linear, visibility .1s linear .5s; 
transition: opacity .25s linear, visibility .1s linear .5s; 
visibility: hidden; 

a

opacity: 1; 
visibility: visible; 

visibilità attenderà .5s e poi passare ad nascosto. Puoi anche disattivare la transizione della visibilità su un lato se vuoi che sbiadisca in entrambe le direzioni. (In modo che quando si dissolvono, l'elemento è immediatamente visibile invece di aspettare .5s e la transizione.)

Answer 4

Usa overflow:hidden > overflow:visible, funziona meglio, io uso come questo:

example { 
#menu ul li ul { 

    background-color:#fe1c1c; 
    width:85px; 
    height:0px; 
    opacity:0; 
    box-shadow:1px 3px 10px #000000; 
    border-radius:3px; 
    z-index:1; 
    -webkit-transition:all 0.5s ease; 
    -moz-transition:all 0.6s ease; 

} 

#menu ul li:hover ul { 

     overflow:visible; 
    opacity:1; 
    height:140px; 
} 

è meglio di visibile perché overflow:hidden agire esattamente come un display:none,