Capítulo 14

Este capítulo habla sobre:

Llevando movimiento a la página con transiciones
Comprender las funciones de sincronización y elegir la correcta
Coordinando con JavaScript

En los medios impresos tradicionales, las cosas son estáticas. El texto no puede moverse sobre el papel; los colores no pueden cambiar. Pero la web es un medio vivo, donde podemos hacer mucho más. Los elementos pueden desvanecerse. Los menús pueden deslizarse hacia adentro. Los colores pueden cambiar de un valor a otro, y la forma más fácil de hacer cualquiera de estos es con transiciones.

Con una transición de CSS, puede decirle al navegador que "relaje" un valor en otro cuando el valor cambia. Por ejemplo, si tiene vínculos azules con un estado de desplazamiento rojo, una transición hará que el vínculo se mezcle de azul a púrpura y a rojo cuando el usuario pasa el mouse, y viceversa cuando el usuario aleja el mouse. Si se usan correctamente, las transiciones pueden mejorar la sensación interactiva de la página y, debido a que nuestros ojos se sienten atraídos por el movimiento, pueden llamar la atención del usuario sobre un cambio a medida que se produce.

A menudo, las transiciones se pueden agregar a la página con poco esfuerzo. En este capítulo, veremos cómo se hace eso, junto con algunas de las decisiones que tendrá que tomar en el proceso. Debido a que hay algunos casos de uso en los que las cosas pueden complicarse un poco, también veremos cómo abordar esos problemas.

14.1. DE AQUÍ PARA ALLÁ

Las transiciones se realizan con la familia de propiedades transición-*. Si se aplican a un elemento mientras cambia uno de sus valores de propiedad, esa propiedad pasará en lugar de cambiar inmediatamente al nuevo valor.

Construyamos un ejemplo básico usando un botón, luego examinemos cómo funciona. Será un botón verde azulado con esquinas cuadradas que, cuando se coloca sobre él, se convierte en un botón rojo con esquinas redondeadas. Estos dos estados se muestran en la figura 14.1, junto con el estado intermedio en transición.

ibid — Figura 14.1. El elemento antes, durante y después de la transición

Agregue un botón a una nueva página y vincúlelo a una hoja de estilo. Aquí se muestra el marcado del botón.

          
<button>Hover over me</button>
          
          Listado 14.1. Agregar un botón simple a la página

A continuación, agregue los estilos a la hoja de estilo. Estos estilos definen tanto el estado normal como el de desplazamiento. Las dos propiedades de transición indican al navegador que realice una transición fluida entre las dos.

          
button {
  background-color: hsl(180, 50%, 50%);       1
  border: 0;
  color: white;
  font-size: 1rem;
  padding: .3em 1em;
  transition-property: all;                   2
  transition-duration: 0.5s;                  3
}
button:hover {
  background-color: hsl(0, 50%, 50%);         4
  border-radius: 1em;                         4
}
          
          Listado 14.2. Estilos de botones con transición

Botón verde azulado
Transición de todos los cambios de propiedad
Transiciones durante 0,5 segundos
Botón rojo de estado de desplazamiento con radio de borde

La propiedad transition-property especifica qué propiedades se realizarán la transición. En este caso, la palabra clave all significa hacer la transición de cualquier propiedad que cambie. La propiedad transition-duration indica cuánto tiempo llevará la transición antes de alcanzar el valor final. En este caso, se dan 0.5s, es decir, 0,5 segundos.

Cargue la página y observe cómo se lleva a cabo la transición mientras pasa el mouse sobre el botón. Observe que la propiedad border-radius cambia de forma fluida de 0 a 1em, aunque no estableció explícitamente un radio de borde de cero en el estado sin desplazamiento. El botón tiene un valor inicial de cero automáticamente y la transición funciona a partir de ahí. Intente cambiar otras propiedades dentro del estado de desplazamiento, como font-size o border.

Se produce una transición cada vez que se cambia una propiedad de este elemento. Esto puede ocurrir en un cambio de estado como :hover o si JavaScript cambia algo, como agregar o eliminar una clase que afecta los estilos del elemento.

Tenga en cuenta que no aplicó las propiedades de transición en el conjunto de reglas :hover; los aplicó con un selector que apunta al elemento en todo momento, aunque lo hace con la regla de desplazamiento en mente. Desea realizar la transición tanto mientras está en el estado de desplazamiento (transición de entrada) como después del estado de desplazamiento (transición de salida). Mientras que otros valores están cambiando, normalmente no desea que cambien las propiedades de transición.

También puede utilizar la propiedad de taquigrafía, transition. La sintaxis para esto se muestra en la figura 14.2. La abreviatura acepta hasta cuatro valores para las cuatro propiedades de transición: transition-property, transition-duration, transition-timing-function y transition-delay.

El primer valor especifica qué propiedades realizar la transición. El valor inicial es la palabra clave all, que afecta a todas las propiedades, pero si necesita que la transición solo se aplique a una propiedad, especifique esa propiedad aquí. Por ejemplo, transition-property: color se aplicaría solo al color del elemento, dejando que otras propiedades cambien instantáneamente. O puede aplicar varios valores: transition-property: color, font-size, por ejemplo.

El segundo valor es la duración. Este es un valor de tiempo expresado en segundos (0.3s, por ejemplo) o milisegundos (300ms).

A diferencia de los valores de longitud, 0 no es un tiempo válido. Debe incluir una unidad para los valores de tiempo (0 o 0ms) o la declaración no será válida y el navegador la ignorará.

El tercer valor es la función de sincronización. Esto controla cómo se calculan los valores intermedios de la propiedad, controlando efectivamente cómo la tasa de cambio se acelera o desacelera a lo largo del efecto de transición. Este es un valor de palabra clave, como linear o ease-in, o una función personalizada. Esta es una parte importante de la transición que veremos en breve.

El valor final, la demora, le permite especificar un período de espera antes de que la transición comience a tener efecto después de que cambie el valor de la propiedad. Si pasa el cursor sobre un botón con un retraso de transición de 0.5s, no verá que el cambio comience hasta medio segundo después de que el cursor del mouse ingrese al elemento.

Si necesita aplicar dos transiciones diferentes a dos propiedades diferentes, puede hacerlo agregando varias reglas de transición, cada una separada por una coma:

          
transition: border-radius 0.3s linear, background-color 0.6s ease;

Alternativamente, use las propiedades de mano larga. Lo siguiente es equivalente:

          
transition-property: border-radius, background-color;
transition-duration: 0.3s, 0.6s;
transition-timing-function: linear, ease;

Verá un ejemplo con múltiples transiciones más adelante en este capítulo.

14.2. FUNCIONES DE TIEMPO

La función de sincronización es una parte importante de la transición. La transición hace que el valor de una propiedad "se mueva" de un valor a otro; la función de cronometraje dice cómo se mueve. ¿Se mueve a una velocidad constante? ¿Arranca lentamente y acelera?

Puede utilizar varios valores de palabras clave, como linear, ease-in y ease-out, para definir este movimiento. Con una transición linear, el valor cambia a una tasa constante. Con ease-in, la tasa de cambio comienza lenta, pero se acelera hasta el final de la transición. Ease-out desacelera, comenzando con un cambio rápido y terminando lentamente. La figura 14.3 ilustra cómo se movería una caja de izquierda a derecha con las diversas funciones de temporización.

Esto puede ser un poco difícil de visualizar a partir de una imagen estática, así que creemos un ejemplo para verlo en vivo en el navegador. Cree una nueva página HTML y agregue este código.

          
<div class="container">
  <div class="box"></div>             1
</div>
          
          Listado 14.3. Una demostración de función de temporización simple

Realizará la transición de este cuadro a lo largo de la pantalla de izquierda a derecha.

A continuación, diseñarás la caja con un poco de color y un poco de tamaño. Luego, lo posicionará absolutamente y usará una transición para mover su posición al pasar el mouse. Agregue una nueva hoja de estilo a la página y copie esta lista en ella.

          
.container {
  position: relative;
  height: 30px;
}
.box {
  position: absolute;
  left: 0;                                1
  height: 30px;
  width: 30px;
  background-color: hsl(130, 50%, 50%);
  transition: all 1s linear;              2
}
.container:hover .box {
  left: 400px;                            3
}
          
          Listado 14.4. Transición de la caja de izquierda a derecha

Empieza posicionado a la izquierda
Aplica una transición
Se mueve 400 px hacia la derecha al pasar el mouse

Esta demostración debería representar un pequeño cuadro verde en la esquina superior izquierda de la página. Cuando se desplaza sobre el contenedor, el cuadro se desplaza hacia la derecha. Observe que se mueve a una velocidad constante y constante.

Esta demostración ilustra un elemento que se mueve a través de la pantalla colocándolo absolutamente y haciendo la transición de la propiedad left. Sin embargo, existen razones de rendimiento para evitar la transición de ciertas propiedades, incluida left. Cubriré estos problemas en el siguiente capítulo, junto con una mejor alternativa usando transformaciones.

Ahora edite la propiedad de transición para ver cómo se comportan las diferentes funciones de temporización. Pruebe la entrada fácil (transition: all 1s ease-in) y la salida fácil (transition: all 1s ease-out). Estas palabras clave hacen el trabajo, pero a veces querrá tener más control. Puede hacer esto definiendo sus propias funciones de temporización. Veamos cómo hacer esto.

14.2.1. Entendiendo las curvas de Bézier

Las funciones de temporización se basan en curvas de Bézier definidas matemáticamente. El navegador utiliza estas curvas para calcular el valor de una propiedad en función del cambio a lo largo del tiempo. Las curvas de Bézier para varias funciones de temporización se muestran en la figura 14.4, así como todos los valores de palabras clave que se pueden utilizar como función de temporización.

Estas curvas comienzan en la parte inferior izquierda y continúan hacia la parte superior derecha. El tiempo avanzará hacia la derecha y la curva representa cómo cambia el valor durante esa progresión antes de llegar al valor final. La función de sincronización lineal es una progresión constante a lo largo de la duración de la transición: una línea recta. La otra curva de valores, que representa aceleración y desaceleración.

Sin embargo, no está limitado a estos cinco valores de palabras clave. Puede definir su propia curva de Bézier cúbica para transiciones más suaves o más drásticas. Incluso puede agregar un pequeño efecto de "rebote". Exploremos esto.

En la página que acaba de crear, abra sus DevTools e inspeccione el elemento del cuadro verde. Debería ver un pequeño símbolo al lado de la función de sincronización en el panel Estilos (Chrome) o el panel Reglas (Firefox). Haga clic en ese símbolo y se abrirá una pequeña ventana emergente que le permitirá modificar la curva de la función de temporización (figura 14.5).

A la izquierda de la ventana emergente, esta interfaz proporciona una serie de curvas prefabricadas para elegir. (Firefox ofrece mucho más que Chrome). Puede hacer clic en una curva para seleccionarla. A la derecha, se muestra la curva de Bézier seleccionada.

En cada extremo de la curva hay una línea recta corta con círculos en el extremo (manijas). Estos son los puntos de control. Haga clic y arrastre uno de estos círculos para manipular la forma de la curva. Observe cómo la longitud y la dirección del mango "tiran" de la curva.

Haga clic fuera de esta ventana emergente para cerrarla y verá que la función de sincronización se ha actualizado. En lugar de una palabra clave como ease-out, ahora será algo así como cubic-bezier(0.45, 0.05, 0.55, 0.95). Esta función cubic-bezier() y los cuatro valores dentro definen la función de temporización personalizada.

Ya sea que use funciones de sincronización de palabras clave o curvas de Bézier personalizadas, es útil saber cuándo usar cuál. Cada sitio o aplicación debe tener una curva de desaceleración (salida fácil), una curva de aceleración (entrada fácil), así como la palabra clave linear. Es mejor reutilizar las mismas pocas curvas para brindar una experiencia de usuario más consistente.

Puede utilizar cada una de las tres funciones en los siguientes escenarios:

Linear: cambios de color y efectos de aparición / desaparición gradual.
Decelerating: cambios iniciados por el usuario. Cuando el usuario hace clic en un botón o se desplaza sobre un elemento, use la función ease-out o algo similar. De esta manera, el usuario verá una respuesta rápida e instantánea a su entrada, disminuyendo a medida que el elemento se detiene.
Acelerating: cambios iniciados por el sistema. Cuando el contenido termine de cargarse o se active un evento de tiempo de espera, use la función ease-in o similar. De esta manera, el elemento entrará fácilmente al principio para llamar la atención del usuario antes de que el elemento se acelere y complete su movimiento.

Estas son reglas blandas. Proporcionan un buen punto de partida, pero no tenga miedo de romperlos si algo no "se siente" bien. Ocasionalmente, también querrá una cuarta curva para movimientos más grandes o más divertidos: use un efecto de entrada y salida (acelerar y luego desacelerar) o un efecto de rebote (consulte el capítulo 15 para ver un ejemplo de rebote).

Echemos un vistazo más de cerca a cómo funciona cubic-bezier(). Otro ejemplo de curva se muestra en la figura 14.6.

Esta figura muestra una curva de Bézier personalizada. Esta curva acelera al principio, avanza más rápido en el medio (la parte más empinada de la curva) y luego desacelera al final. La curva existe en una cuadrícula cartesiana. Comienza en el punto (0, 0) y termina en el punto (1, 1).

Con los puntos finales establecidos, la posición de los dos controladores es todo lo que necesita para definir la curva. En CSS, esta curva se puede definir como cubic-bezier(0.45, 0.05, 0.55, 0.95). Los cuatro valores representan las coordenadas xey de los puntos de control de los dos controles. Las curvas son difíciles de visualizar solo a partir de estos números. Editarlos a través de una GUI es mucho más intuitivo, por lo que me gusta editar y probar una transición en el navegador antes de copiar el Bézier cúbico resultante en mi hoja de estilo. Prefiero DevTools para esto, pero también puede usar un recurso en línea como https://cubic-bezier.com/.

14.2.2. Pasos

Un último tipo de función de temporización utiliza la función steps(). En lugar de proporcionar una transición fluida basada en Bézier de un valor al siguiente, esto lo mueve en una serie de "pasos" discretos e instantáneos.

La función toma dos parámetros: el número de pasos y una palabra clave (ya sea de start o end), que indica si cada cambio debe tener lugar al principio o al final de cada paso. Algunas funciones escalonadas se ilustran en la figura 14.7.

Tenga en cuenta que end es el valor predeterminado para el segundo parámetro, por lo que los steps(3) se pueden utilizar en lugar de los steps(3, end). Para ver los pasos en acción, edite su hoja de estilo para que coincida con esta lista.

          
.box {
  position: absolute;
  left: 0;
  height: 30px;
  width: 30px;
  background-color: hsl(130, 50%, 50%);
  transition: all 1s steps(3);             1
}
          
          Listado 14.5. Usando steps() para incrementar el valor

Transiciones en tres pasos discretos

Ahora, en lugar de moverse con fluidez de izquierda a derecha durante un segundo (la duración de la transición), el tiempo se divide en tercios o tres pasos. Para cada paso, el cuadro aparece en la posición inicial, la posición de un tercio, luego la posición de dos tercios, antes de moverse a la posición final en la marca de 1 segundo.

De forma predeterminada, el valor de la propiedad cambia al final de cada paso, por lo que la transición no comienza de inmediato. Puede cambiar este comportamiento para que los cambios tengan lugar al principio de cada paso en lugar de al final agregando la palabra clave de start: steps(3, start).

Los usos prácticos de step() son poco comunes, pero hay una lista inteligente de ideas en https://css-tricks.com/clever-uses-step-easing/.

14.3 PROPIEDADES NON-ANIMATABLE

Muchas transiciones son sencillas. Por ejemplo, puede aplicar transition: color 200ms linear a los enlaces para que se desvanezcan de un color a otro cuando se pasa el cursor sobre ellos o se hace clic en ellos. O puede cambiar el color de fondo de un mosaico en el que se puede hacer clic o el relleno de un botón.

Si JavaScript cambia algo en la página, es posible que desee considerar si agregar una transición es apropiado. En algunos casos, esto es tan simple como agregar una propiedad de transición a ese elemento. En otros casos, puede requerir un poco más de orquestación. Durante el resto de este capítulo, creará un menú desplegable y aplicará transiciones para que se abra sin problemas en lugar de aparecer a la vista.

Primero, hará que se desvanezca, cambiando su valor de opacity. Después de eso, cambiará el menú desplegable para usar un efecto diferente, cambiando height. Ambos efectos introducen problemas particulares que requieren un poco más de reflexión.

El menú se verá como la figura 14.8. Comenzará por abrir y cerrar el menú. Después de eso, agregará los efectos de transición. Incluí un vínculo debajo del menú. Observe cómo aparece el cajón del menú frente a este enlace cuando está abierto; esto será importante.

Cree una nueva página para el menú desplegable, agregando el marcado que se muestra a continuación. Esto es similar a los menús desplegables que ha creado en capítulos anteriores e incluye algo de JavaScript para alternar los estados abierto y cerrado del menú.

          
<div class="dropdown" aria-haspopup="true">
  <button class="dropdown__toggle">Menu</button>
  <div class="dropdown__drawer">                           1
    <ul class="menu" role="menu">
      <li role="menuitem">
        <a href="/features">Features</a>
      </li>
      <li role="menuitem">
        <a href="/pricing">Pricing</a>
      </li>
      <li role="menuitem">
        <a href="/support">Support</a>
      </li>
      <li role="menuitem">
        <a href="/about">About</a>
      </li>
    </ul>
  </div>
</div>
<p><a href="/read-more">Read more</a></p>                  2

<script type="text/javascript">
  (function () {
    var toggle = document.getElementsByClassName('dropdown__toggle')[0];
    var dropdown = toggle.parentElement;
    toggle.addEventListener('click', function (e) {        3
      e.preventDefault();                                  3
      dropdown.classList.toggle('is-open');                3
    });
  }());
</script>
          
          Listado 14.6. Menú desplegable de transición

El cajón que aparecerá y desaparecerá para revelar el menú
Un enlace que aparecerá debajo del menú desplegable.
Alterna la clase está abierta en el contenedor cuando se hace clic en el botón

Los estilos antes de agregar el efecto de aparición gradual se muestran en la siguiente lista. Agréguelos a una hoja de estilo y vincúlelos a la página. Agregué algunos efectos de transición para que los colores cambien sin problemas al pasar el mouse. Aparte de eso, todavía no hay muchas novedades aquí, pero esto hace que la página se configure para que pueda concentrarse en crear el efecto de aparición gradual.

          
body {
  font-family: Helvetica, Arial, sans-serif;
}

.dropdown__toggle {
  display: block;
  padding: 0.5em 1em;
  border: 1px solid hsl(280, 10%, 80%);
  color: hsl(280, 30%, 60%);
  background-color: white;
  font: inherit;
  text-decoration: none;
  transition: background-color 0.2s linear;                    1
}
.dropdown__toggle:hover {
  background-color: background-color: hsl(280, 15%, 95%);      2
}
.dropdown__drawer {
  position: absolute;
  display: none;
  background-color: white;
  width: 10em;
}
.dropdown.is-open .dropdown__drawer {
  display: block;
}

.menu {
  padding-left: 0;
  margin: 0;
  list-style: none;
}
.menu > li + li > a {
  border-top: 0;
}
.menu > li > a {
  display: block;
  padding: 0.5em 1em;
  color: hsl(280, 40%, 60%);
  background-color: white;
  text-decoration: none;
  transition: all .2s linear;                                  3
  border: 1px solid hsl(280, 10%, 80%);
}
.menu > li > a:hover {
  background-color: hsl(280, 15%, 95%);                        4
  color: hsl(280, 25%, 10%);                                   4
}
          
          Listado 14.7. Estilos de menú desplegable de transición

Cambia el color de fondo cuando cambia
Cambia el color de fondo al pasar el mouse
Transiciones de colores de fondo y texto
Cambia los colores al pasar el mouse

Abra esta página en su navegador y pruébelo. Debería poder abrir y cerrar el menú haciendo clic en el botón de alternancia. Observe cómo tanto el botón como los enlaces del menú cambian sus colores suavemente cuando pasa el mouse sobre ellos y nuevamente cuando lo aleja.

Usé una duración de transición de 0.2 segundos para estos efectos de desplazamiento. Como regla general, la mayoría de las transiciones deben estar entre 200 y 500 ms. Un poco más, y los usuarios percibirán su página como lenta y sentirán que están esperando innecesariamente que la página responda. Esto es doblemente cierto para los efectos que el usuario verá a menudo y repetidamente.

Utilice velocidades de transición rápidas para efectos de desplazamiento, fundidos y pequeños efectos de escala. Manténgalos por debajo de 300 ms; es posible que incluso desee bajar hasta 100 ms en algunos casos. Para las transiciones que implican grandes movimientos o funciones de temporización complejas, como los rebotes (consulte el capítulo 15), utilice transiciones un poco más largas entre 300 y 500 ms.

Cuando estoy trabajando en una transición, a veces la ralentizo a dos o tres segundos completos. De esta forma puedo observar con atención lo que está haciendo y asegurarme de que se comporta como quiero. Si hace esto, asegúrese de volver a configurarlo a una velocidad corta agradable después de que haya terminado.

14.3.1. Propiedades que no se pueden animar

No todas las propiedades se pueden animar. La propiedad display es una de ellas. Solo puede alternar entre display: none y display: block; no puede realizar una transición entre valores, por lo que se ignoran las propiedades de transición aplicadas a la display.

Si busca una propiedad en una guía de referencia como MDN (https://developer.mozilla.org/en-US/), normalmente le dirá si puede animar una propiedad y qué tipo de valor (por ejemplo , longitud, color, porcentaje) se pueden interpolar. Los detalles de la propiedad background-color de https://developer.mozilla.org/en-US/docs/Web/CSS/background-color se muestran en la figura 14.9.

La propiedad background-color, como se muestra en la figura, se puede animar solo como un valor de color, es decir, de un color a otro (lo cual tiene sentido, ya que esta propiedad debe establecerse como un color). El tipo de animación de una propiedad se aplica tanto a las transiciones como a las animaciones, que utilizará en el capítulo 16. La documentación también enumera otra información útil sobre la propiedad, como su valor inicial, a qué tipo de elementos se puede aplicar y si es heredado. Si necesita un buen resumen técnico de cómo se puede utilizar una propiedad, busque la propiedad en la documentación de MDN y mire su cuadro de propiedades.

La mayoría de las propiedades que aceptan una longitud, un número, un color o la función calc() se pueden animar. La mayoría de las propiedades que toman una palabra clave u otros valores discretos, como yrl(), no pueden.

Si buscara la propiedad display, vería que su tipo de animación es discrete, lo que significa que solo se puede cambiar entre valores discretos y no se puede interpolar en una animación o transición. Si desea que un elemento aparezca o desaparezca, no puede realizar la transición de la propiedad de display; pero puedes usar la propiedad opacity.

14.3.2. Desvaneciéndose dentro y fuera

A continuación, usemos una transición de opacidad para darle a nuestro menú un efecto de aparición y desaparición gradual a medida que se abre y se cierra. El resultado será similar al que se muestra en la figura 14.10.

La propiedad de opacity puede ser cualquier valor entre 0 (completamente invisible) y 1 (completamente opaco). La siguiente lista muestra la idea básica. Sin embargo, esto solo no funcionará por razones que pronto verá. Continúe y edite su hoja de estilo para que coincida.

          
.dropdown__drawer {
  position: absolute;
  background-color: white;
  width: 10em;
  opacity: 0;                            1
  transition: opacity 0.2s linear;       2
}
.dropdown.is-open .dropdown__drawer {
  opacity: 1;                            3
}
          
          Listado 14.8. Agregar reglas de opacidad y transición

Reemplaza la pantalla: ninguna con opacidad: 0
Transiciones de opacidad
Reemplaza la pantalla: bloque con opacidad 1

Ahora el menú aparece y desaparece a medida que lo abre y lo cierra. Desafortunadamente, el menú no desaparece cuando está cerrado; es completamente transparente, pero todavía está presente en la página. Y, si intenta hacer clic en el vínculo Leer más, no funcionará. En su lugar, hará clic en el elemento de menú transparente que se encuentra frente a él y lo llevará a la página Funciones.

Debe cambiar la opacidad, pero también quitar completamente el cajón del menú cuando no está visible. Puede hacer esto con la ayuda de otra propiedad, visibility.

La propiedad visibility le permite eliminar un elemento de la página, similar a la propiedad display. Puedes darle los valores visible o hidden. A diferencia de display, visibility es animable. La transición no hace que se desvanezca, pero obedecerá a transition-delay, donde la propiedad display no lo hará.

Aprovecharás la capacidad de visibility para animar con un pequeño truco. Cambie su CSS para que coincida con el código de esta lista, luego le explicaré cómo funciona.

          
.dropdown__drawer {
  position: absolute;
  background-color: white;
  width: 10em;
  opacity: 0;                               1
  visibility: hidden;                       1
  transition: opacity 0.2s linear,
              visibility 0s linear 0.2s;    2
}
.dropdown.is-open .dropdown__drawer {
  opacity: 1;                               3
  visibility: visible;                      3
  transition-delay: 0s;                     4
}
          
          Listado 14.9. Usar un retraso de transición para manipular cuando cambia la visibilidad

Oculto y transparente cuando está cerrado
Retrasa la transición de visibilidad 0,2s
Visible y completamente opaco cuando se abre
Elimina el retardo de transición mientras se aplica la clase abierta

Aquí, ha dividido la transición en dos conjuntos de valores. Esto define el comportamiento de desvanecimiento. El primer conjunto de valores cambia la opacidad durante 0,2 segundos. El segundo conjunto cambia la visibilidad durante 0 segundos (un instante) después de 0,2 segundos de retraso. Esto significa que la opacidad cambia primero y cuando termina, la visibilidad cambia. Esto permite que el menú se desvanezca lentamente y luego, cuando esté completamente transparente, la visibilidad cambie a hidden. A continuación, el usuario puede hacer clic en el enlace Leer más sin que el menú interfiera.

Cuando el menú se desvanece, necesitará que el orden sea diferente: la visibilidad debe activarse inmediatamente, seguida de una transición de opacidad. Por eso, en el segundo conjunto de reglas, cambió el retardo de transición a 0. De esta manera, la visibilidad está oculta mientras el menú está cerrado, pero visible durante las transiciones de aparición y desaparición gradual.

Puede utilizar el evento de final de transición de JavaScript para realizar una acción después de que se complete una transición.

Este efecto de desvanecimiento también se puede lograr con algo de JavaScript en lugar del retraso de transición, pero encuentro que esto requiere más código y puede ser propenso a errores. A veces, sin embargo, JavaScript será necesario para lograr el efecto deseado (que verá en un momento), pero si una transición o animación se puede lograr solo a través de CSS, eso es casi siempre preferible.

14.4. TRANSICIÓN A ALTURA AUTOMÁTICA

Reutilicemos el menú desplegable para usar un efecto diferente que también es común: deslizarse para abrirse y cerrarse con una altura de transición. Este efecto se ilustra en la figura 14.11.

Cuando se abre el menú, pasa de una altura de cero a su altura natural (auto). Cuando se cierra, vuelve a cero. La idea general se muestra en el siguiente listado. Desafortunadamente, no funciona. Cambie esta parte de su CSS para que coincida con estas reglas, luego veremos cuál es el problema y cómo puede solucionarlo.

          
.dropdown__drawer {
  position: absolute;
  background-color: white;
  width: 10em;
  height: 0;                               1
  overflow: hidden;                        1
  transition: height 0.3s ease-out;        2
}
.dropdown.is-open .dropdown__drawer {
  height: auto;                            3
}
          
          Listado 14.10. Transición del valor de altura

El cajón cerrado no tiene altura y el rebosadero está oculto.
Transiciones de altura
La altura del cajón abierto está determinada por su contenido.

El desbordamiento está oculto para cortar el contenido del cajón cuando está cerrado o en transición. Pero esto no funciona porque un valor no puede pasar de una longitud (0) a auto.

En su lugar, puede establecer una altura explícitamente en algo así como 120px, pero el problema es que no sabe exactamente cuál debería ser la altura. Eso solo se sabe una vez que los contenidos se configuran y procesan en el navegador, por lo que tendrá que usar JavaScript para determinar la altura.

Una vez que se cargue la página, accederá a la propiedad scrollHeight del elemento DOM. Esto le dará el valor apropiado para su altura. Luego, cambiará ligeramente el código para establecer la altura del elemento en este valor. Edite la secuencia de comandos en su página para que coincida con la siguiente lista.

          
(function () {
  var toggle = document.getElementsByClassName('dropdown__toggle')[0];
  var dropdown = toggle.parentElement;
  var drawer = document.getElementsByClassName('dropdown__drawer')[0];
  var height = drawer.scrollHeight;                                       1

  toggle.addEventListener('click', function (e) {
    e.preventDefault();
    dropdown.classList.toggle('is-open');
    if (dropdown.classList.contains('is-open')) {
      drawer.style.setProperty('height', height + 'px');                  2
    } else {
      drawer.style.setProperty('height', '0');                            3
    }
  });
}());
          
          Listado 14.11. Establecer la altura explícitamente para que la transición funcione

Obtiene la altura automática calculada del cajón
Establece la altura explícitamente para abrir
Restaura la altura a cero para cerrar

Ahora, además de alternar la clase is-open, también especificó explícitamente una altura en píxeles para que el elemento cambie a la altura correcta. Luego, vuelve a establecer la altura en cero al cerrar para que el menú pueda volver a cambiar.

La propiedad scrollHeight de un elemento es igual a 0 si el elemento está oculto usando display: none. Si este es tu caso, puedes configurar la pantalla para block(el.style.display = 'block'), acceder a scrollHeight y luego restaurar el valor de visualización (el.style.display = 'none').

Las transiciones a veces requieren la coordinación entre CSS y JavaScript. En algunos casos, puede resultar tentador mover la lógica por completo a JavaScript. Por ejemplo, puede reproducir la transición de altura estableciendo repetidamente una nueva altura solo en JavaScript. Pero, en general, debería dejar que CSS haga todo el trabajo pesado posible. Está mejor optimizado en el navegador (y, por lo tanto, tiene más rendimiento) y proporciona algunas funciones, como la aceleración, que pueden requerir una gran cantidad de código para imitar a mano.

Aún no ha terminado con las transiciones. Serán útiles junto con las transformaciones en el próximo capítulo.

RESUMEN

Puede utilizar las transiciones para suavizar los cambios repentinos en la página.
Para captar la atención del usuario, utilice un movimiento de aceleración.
Para mostrarle al usuario que su acción ha surtido efecto, utilice un movimiento de desaceleración.
Puede usar JavaScript para coordinar las transiciones con cambios de nombre de clase cuando CSS por sí solo no puede hacer lo que necesita.