-webkit-transition con pantalla

Question

¿Hay alguna manera de usar -webkit-transition con display?

estoy usando CSS display para ocultar y mostrar un navegaciones segundo nivel ... pero sólo display: none y display: block en :hover es un poco de un-sexy ... un ease sería grande (como -webkit-transition: display 300ms ease-in;)

Sé que es bastante fácil de hacer esto con jQuery, pero actualmente estoy intentando configurar todo con CSS3 (lo sé: no todos los navegadores lo admiten, pero eso es irrelevante para este proyecto en el que estoy trabajando actualmente)

he aquí un código & estructura: (el li.menu1 tiene 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

Debe usar la transición height o width para mostrar y ocultar el menú de segundo nivel. Display la propiedad no es compatible con las transiciones.

Hay un artículo en ODC con something similar a sus necesidades. Además, tengo modified it a bit para parecer más al elemento del menú. Funciona perfectamente en Opera 10.7, sin transiciones en Firefox 3.6.12 y no funciona en Chrome 7.0.517.41.

Espero que esto sea útil como punto de partida para su propio menú animado.

Actualización 1: Your menu with ease-in transitions. Probablemente, tengo algo mal acerca de su estructura. El problema es que las transiciones no funcionan con auto, por lo que debe especificar manualmente la altura final.

Actualización 2: Utilice la opacidad como propiedad de transición. En visibilidad del conjunto de elementos invisibles: oculta y visibilidad: visible en visible. Eso evitará los enlaces invisibles clicables. Además, la transición visible-invisible no funciona, no sé por qué. Tengo que trabajar más om.

Example.

Answer 2

Debe utilizar una transición de opacidad, no una transición de pantalla para esta. Pantalla: ninguno elimina por completo un elemento del diseño; creo que lo quieres allí, pero es invisible.

Answer 3

Así que no estoy seguro de ver todas las piezas juntas aquí. Desea animar la opacidad y la visibilidad, con visibilidad que tiene un retraso para que la opacidad se realice antes de que se dispare;

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; 

visibilidad esperará .5s y luego cambiar a la escondida. Incluso puede desactivar la transición de visibilidad en un lado si desea que se desvanezca en ambos sentidos. (De modo que al desvanecerse, el elemento es instantáneamente visible en lugar de esperar .5s y la transición.)

Answer 4

Uso overflow:hidden > overflow:visible, funciona mejor, lo uso como esto:

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

es mejor que la visible porque overflow:hidden actúan exactamente igual que un display:none,