html5 y css3
/

Transiciones y acordeón vertical con CSS3 y HTML

El módulo Transitions de CSS permite realizar movimientos en una página HTML. Se puede obtener mayor información sobre este apartado en el siguiente enlace. Sin embargo, a través de un ejemplo intentaremos profundizar para obtener las claves de esta herramienta que disponemos al alcance sin la manipulación de otro lenguaje adicional.

Las propiedades CSS3 transition llevan a la posibilidad de dar el movimiento en un diseño. Básicamente existen cuatro propiedades que comentamos a continuación.

Transition-property: Precisa las propiedades CSS que se desea animar (color, ancho). Debe indicarse en una lista separadas por comas. La palabra clave all (valor por defecto) indica todas las propiedades animadas del elemento.

Transition-duration: Indica la duración de la transición. Se puede expresar en segundos (s) o milisegundos (ms).

Transition-timing-function: Indica la función de transición que se utiliza con estar cuatro posibilidades. 1) linear: rapidez constante en toda la duración de la animación; 2) ease-in: lento al principio y acelerado hacia el final; 3) rápido al principio y desacelerado hacia el final y 4) ease-in-out: inicio y final más lentos.

Transition-delay: Significa el retardo o el avance del inicio de la transición. Se expresa en segundos (s) o milisegundos (ms);

 

Un ejemplo, en forma abreviada, de uso y sintaxis es {transition: width 2s ease, height 3s linear;}

Veamos este ejemplo final que comentaremos posteriormente basado en un expositor o contenedor que muestra la información en forma de acordeón vertical.

Acordeón Vertical CSS3 HTML5 Altruistas
Vista parcial del ejemplo Acordeón Vertical

Código


<!DOCTYPE html>
<html lang="es">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Transiciones</title>
</head>
<style type="text/css">
   .acordeonvertical>ul {
      margin: 0;
      padding:0;
      list-style:none;
      width: 300px;
   }
   .acordeonvertical>ul>li {
      display:block;
      overflow: hidden;
      margin: 0;
      padding: 0;
      list-style:none;
      height: 30px;
      width: 300px;
      background-color: rgb(215,230,245);
      border-radius: 7px;
      transition: height 0.3s ease-in-out;
   }
   .acordeonvertical>ul>li>h3 {
      display:block;
      margin: 0;
      padding: 10px;
      height: 19px;
      border-top: #f0f0f0 1px solid;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 80%;
      color: #000;
      background: rgb(185, 205, 225);
   }

   .acordeonvertical>ul>li>div {
      margin:0;
      overflow: auto;
      padding: 10px;
      height: 150px;
   }
   .acordeonvertical>ul>li:hover {
      height: 150px;
   }
   .acordeonvertical>ul>li:hover>h3 {
      color: #fff;
      background: rgb (125, 165, 205);
      font-size: 80%;
   }
   .acordeonvertical>ul>li>h3:hover {
      cursor: pointer;
   }
</style>
<body>
   <div class="acordeonvertical">
      <ul>
         <li>
            <h3>Item 1</h3>
            <div>
               [Lorem 4 ipsum ...Tempore eius quis corrupti?]
            </div>
         </li>
         <li>
            <h3>Item 2</h3>
            <div>
               [Lorem 4 ipsum ...Tempore eius quis corrupti?]
            </div>
         </li>
         <li>
            <h3>Item 2</h3>
            <div>
               [Lorem 4 ipsum ...Tempore eius quis corrupti?]
            </div>
         </li>
         <li>
            <h3>Item 4</h3>
           <div>
              [Lorem 4 ipsum ...Tempore eius quis corrupti?]
           </div>
         </li>
      </ul>
   </div>
</body>
</html>

Puede ver este código en ejecución en este enlace. Nótese que el texto Lorem se ha recortado para beneficiar la lectura del artículo. En el ejemplo se ha utilizado un Lorem de 20 palabras.

Comentario


La animación está basada en el elemento <li> de la lista no ordenada. Consiste en el espacio que se destina al elemento con y sin tener el puntero del ratón sobre uno de ellos.

En el caso de que un <li> no tenga el puntero del ratón

.acordeonvertical>ul>li { 
   [...]
   height: 30px;
   [...]
   transition: height 0.3s ease-in-out; 
}

Caso en el que un <li> reciba el puntero del ratón

.acordeonvertical>ul>li:hover { 
   height: 150px; 
}
Hay que añadir que existen cuatro items <li> y que cada uno de ellos dispone de un texto con etiqueta <h3> y una capa <div> con texto de 20 palabras. La respuesta de la transición siempre es individual sobre el elemento por el que se pasa el ratón. Como ya se habrá podido adivinar los parámetros de la animación recaen sobre la diferencia de altura del elemento <li> cuando se produce el elemento que dispara la animación que es justamente cuando se deja de pasar el ratón sobre el elemento <li> elegido.
Se debe recordar

Deja una respuesta