Transiciones CSS

Parte de la sección JavaScript in Action del Journey de HTML de Coddy — lección 18 de 27.

A veces queremos crear animaciones suaves (como desvanecimientos, deslizamientos o cambios de tamaño) cuando un elemento aparece o desaparece.
Usamos transiciones CSS para eso (cubierto en la sección de maestría en CSS). En JavaScript, simplemente añadimos o eliminamos una clase, o modificamos las propiedades de estilo.

HTML:

<button id="toggleBtn">Toggle Box</button>
<div id="box" class="box"></div>

El .box tiene una transición en su opacidad, por lo que cuando se añade la clase .hidden (que establece la opacidad a 0), el cuadro se desvanece en lugar de desaparecer instantáneamente.

.box {
  width: 100px;
  height: 100px;
  background-color: teal;
  transition: opacity 0.5s ease; /* para alternar la clase */
  opacity: 1;
}

.hidden {
  opacity: 0;
}

Cuando se hace clic en el botón, el cuadro se desvanece:

const button = document.getElementById("toggleBtn");
const box = document.getElementById("box");

button.addEventListener("click", function () {
  // la opacidad se desvanece
  box.classList.toggle("hidden");
});

Desafío

Fácil

Crea un botón de alternancia que muestre/oculte un cuadro cuando se haga clic.

Pasos:

Crea dos variables para almacenar:
- El elemento del botón de alternancia
- El elemento del cuadro de desvanecimiento
  Usa document.getElementById() para ambos
Agrega un escuchador de eventos de clic al botón de alternancia
Cuando se haga clic en el botón, alterna la clase "hidden" en el elemento del cuadro de desvanecimiento

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
  <title>Fade Toggle Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Smooth Fade Example</h1>
    <p>Click the button below to toggle the fading box.</p>
    <button id="toggleBtn">Toggle Box</button>

    <div id="fadeBox" class="box">
      <p>This box fades in and out smoothly!</p>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>