Transiciones CSS - Problemas

De acuerdo, tengo un par de problemas para hacer que las transiciones en CSS funcionen como me gustaría, y me gustaría que alguien con algo de experiencia en CSS me muestre cómo lograr lo que quiero lograr.

La transición inicial real que tengo funciona bien, pero hay dos problemas que tengo aquí.

En primer lugar, el segundo botón/enlace de mi barra de navegación, Caracteres, tiene tres subenlaces, que se muestran cuando se pasa el cursor sobre el botón Caracteres. Me gustaría obtenerlo para que estos subenlaces no se muestren hasta que haya tenido lugar la transición real del botón Caracteres. Espero que estés recibiendo lo que estoy diciendo. Entonces, ¿es esto posible, y si es así, cómo?

En segundo lugar, en este momento todo lo que tengo en su lugar es una transición cuando los botones/enlaces se desplazan, pero ninguno para cuando se implementan. En cambio, en el despliegue, vuelve instantáneamente al estado predeterminado, y siento que realmente estropea el efecto de transición. Por lo tanto, me gustaría saber si es posible establecer una transición para pasar el mouse hacia afuera y hacia adentro.

Aquí está mi código HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link rel="stylesheet" href="complex_1.css"/>
</head>

<body>
  <ul id="navbar">
    <li id="home"><a href="#">Home</a></li>
    <li id="characters"><a href="#">Characters</a>
        <ul>
          <li id="subzero"><a href="#">Sub-Zero</a></li>
          <li id="scorpion"><a href="#">Scorpion</a></li>
          <li id="kano"><a href="#">Kano</a></li>
        </ul>
    </li>
    <li id="about"><a href="#">About</a></li>
    <li id="contact"><a href="#">Contact</a></li>
  </ul>
</body>
</html>

Y el código CSS problemático:

ul { /* Sets out the dimensions of the unordered list. */
  font-family:Verdana;
  font-size: 17px; 
  margin: 0px;
  padding: 0px; 
  list-style:none;
  position:absolute;
  letter-spacing:1px;
} 

ul li { /* All list items of unordered lists. */  
  display: block;
  position: relative; 
  text-align:center;
  float: left; /* Makes the navigation bar horizontal instead of vertical. */ 
} 

li ul { 
  display: none; /* Hides the dropdown menu list items by default. */ 
}

ul li a { /* All list items of unordered lists that are links. */ 
  color: #ffffff; 
  background: #000000;
  display:block;
  text-decoration: none;
  border-top: 1px solid #ffffff; 
  padding: 7px 40px 7px 40px; 
  margin-left: 0px; 
  white-space: nowrap; 
} 

ul li a:hover { 
  -moz-transition-property:background-color;
  -moz-transition-duration:400ms;
  -moz-transition-timing-function:ease-in-out; 
  color:#ffffff;
  background: #ff0000;
  } 

li:hover ul { 
  display:block;
  width:182px; 
} 

li:hover li {
  display:block; 
  font-size:10px; 
  float:none;
}

li:hover a { 
  background: #000000;   /* This is where you apply the colour you want for the dropdown list items off the main menu. */
} 

li:hover li a:hover { 
  color: #ffffff;
  background: #ff0000;   /* This is where you apply the colour you want for the hover over the list. */
} 

Gracias de antemano a cualquiera que pueda ayudarme con lo que quiero hacer aquí, realmente se lo agradezco mucho.

preguntado el 03 de mayo de 12 a las 14:05

¿Recuerdas cuando respondimos tu pregunta? -

Jaja, lo siento amigo, no tengo el mejor enfoque en el mejor de los casos, y menos en la universidad. -

3 Respuestas

está bien. Entonces. Respuesta 1.

en lugar de poner la propiedad de transición en el selector específico, intente simplemente hacer un selector como este:

.trans {
    -webkit-transition:  all 300ms linear;
    -moz-transition:     all 300ms linear;
    -ms-transition:      all 300ms linear;
    transition:          all 300ms linear; 
}

Luego puede aplicar class="trans" en sus etiquetas de anclaje html.

La razón por la que la transición solo ocurre en "adentro" y no en "afuera" es porque solo se aplica a: hover. Debería aplicarlo tanto al selector normal como al estado de desplazamiento.

Lo anterior fue limpio y breve, pero a veces querrás diferentes tiempos de transición.

En ese caso:

.my-thing {
    -webkit-transition:  all 300ms linear;
    -moz-transition:     all 300ms linear;
    -ms-transition:      all 300ms linear;
    transition:          all 300ms linear; 
}

.my-thing:hover {
    -webkit-transition:  all 600ms linear;
    -moz-transition:     all 600ms linear;
    -ms-transition:      all 600ms linear;
    transition:          all 600ms linear; 
}

Respuesta 2.

Puede retrasar una transición. En su caso, la transición de display:none a block.

.delay {
    transition-delay: 300s;
    -moz-transition-delay: 300s;
    -webkit-transition-delay: 300s;
    -o-transition-delay: 300s;
}

Entonces podrías aplicar esto al sub ul o algo así.

En general, reconsideraría sus selectores. Parece que en tu emoción has hecho las cosas más complicadas de lo que deberían ser.

Comprar este jsFiddle.

Para animar el menú desplegable, es posible que necesite un script Java. Parece que no puedo mostrar una transición: ninguna para bloquear. Pero mira el violín. Creo que responde a sus preguntas y muestra ejemplos de las dos soluciones anteriores. ¡Buena suerte!

Respondido el 03 de diciembre de 12 a las 04:12

A partir de octubre de 2013, probablemente usaría sass y haría una mezcla para algunas transiciones diferentes y @include or @extend ellos en lugar de agregar .trans clase al marcado. - Sheriffderek

Intenta echar un vistazo aquí ejemplo de transición de webkit. Sé que es para webkit, pero puede ayudar. Se usa el atributo onmouseout para cuando se mueve fuera del elemento.

contestado el 03 de mayo de 12 a las 14:05

Para responder a la segunda parte de su pregunta, poner el código de transición en ul li a en vez de :hover state significa que funcionará para todos los estados (:link, :hover, :focus, :active).

Si desea realizar la transición de los submenús, intente poner el código de transición en ul li ul {}. Transición de la display Sin embargo, la propiedad no funcionará muy bien, por lo que probablemente querrá probar opacity (u otras cosas como height) también, por ejemplo, establecer ul li ul {opacity: 0;} ul li:hover ul {opacity: 1;}.

contestado el 03 de mayo de 12 a las 14:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.