-webkit-transizione con display

Question

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

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

So che è abbastanza facile da fare questo con jQuery, ma attualmente sto cercando di impostare tutto con CSS3 (lo so: non tutti i browser lo supportano, ma questo è irrilevante per questo progetto su cui sto attualmente lavorando su)

ecco qualche codice & struttura: (il li.menu1 ha una :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

Si dovrebbe usare height o di transizione width al fine di mostrare e menu di secondo livello di nascondere. struttura Display non è supportata da transizioni.

C'è un articolo in ODC con qualcosa di simile alle vostre esigenze. Inoltre, ho modificato un po ' al fine di guardare più come voce di menu. Funziona perfettamente in Opera 10.7, senza transizioni in Firefox 3.6.12 e non fa affatto in Chrome 7.0.517.41.

Spero che questo possa essere utile come punto di partenza per il proprio menu animati.

Aggiornamento 1: vostro menu con facilità nelle transizioni . Probabilmente, ho qualcosa di sbagliato a riguardo della struttura. Il problema è che le transizioni non fare il lavoro con auto, quindi bisogna specificare manualmente l'altezza finale.

Aggiornamento 2: Utilizzare l'opacità come proprietà di transizione. Su invisibile visibilità elemento set: nascosto e visibilità: visibile su visibile. Che impedisce di link cliccabili invisibili. Inoltre, la transizione visibile-invisibile non funziona, non so perché. Devono lavorare di più om esso.

Esempio .

Answer 2

Quindi io non sono sicuro di vedere tutti i pezzi messi insieme qui. Si desidera animare l'opacità e la visibilità, con la visibilità che ha un ritardo in modo da opacità è fatto prima innesca;

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. È anche possibile disattivare la transizione visibilità da un lato, se si vuole che dissolvenza in entrambe le direzioni. (In modo che quando dissolvenza in apertura, l'elemento è immediatamente visibile, invece di .5s e la transizione in attesa.)

Answer 3

Si dovrebbe usare una transizione opacità, non una transizione di visualizzazione per questo. Display: none rimuove un elemento dal layout del tutto - Penso che si desidera lì, ma invisibile

.

Answer 4

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

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,