Transiciones CSS

Parte de la sección JavaScript en Acción del Journey de HTML de Coddy. Lección 18 de 27.

A veces queremos crear animaciones fluidas (como desvanecimientos, deslizamientos o cambios de tamaño) cuando un elemento aparece o desaparece.
Para eso usamos transiciones CSS (tema tratado en la sección de dominio de 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 en 0), el box se desvanece en lugar de desaparecer instantáneamente.

.box {
  width: 100px;
  height: 100px;
  background-color: teal;
  transition: opacity 0.5s ease; /* for class toggle */
  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 () {
  // opacity fades
  box.classList.toggle("hidden");
});

Desafío

Fácil

Crea un botón de alternancia que muestre u oculte un cuadro al hacer 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
Añade un detector 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>