css - texto - -webkit-transición con pantalla

keyframes css3 ejemplos

Question

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

Estoy usando la display CSS para ocultar y mostrar un segundo nivel de navegación ... pero solo display: none y display: block en :hover es un poco -webkit-transition: display 300ms ease-in; ... una ease sería genial (como -webkit-transition: display 300ms ease-in; )

Sé que es bastante fácil hacer esto con jQuery, pero actualmente estoy tratando de 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)

Aquí hay algo de código y 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

Así que no estoy seguro de ver todas las piezas juntas aquí. Desea animar la opacidad y la visibilidad, ya que la visibilidad tiene un retraso, por lo que la opacidad se realiza antes de que se active;

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;

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

Answer 2

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

Hay un artículo en ODC con algo similar a sus necesidades. Además, lo he modificado un poco para parecerme más a un 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 inicio para su propio menú animado.

Actualización 1: Su menú con transiciones fáciles . Probablemente, tengo algo mal en su estructura. El problema es que las transiciones no funcionan con el modo auto , por lo que debe especificar manualmente la altura final.

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

Example .

Answer 3

Debe usar una transición de opacidad, no una transición de visualización para esto. Pantalla: ninguno elimina un elemento del diseño por completo; creo que lo desea, pero invisible.

Answer 4

Use overflow:hidden > overflow:visible , funciona mejor, uso así:

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 visible porque se overflow:hidden acto overflow:hidden exactamente igual que una display:none ,