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 desvanecer, deslizar o cambiar el tamaño) cuando aparece o desaparece un elemento.
Para eso usamos transiciones CSS (que se explican en la sección de dominio de CSS). En JavaScript, simplemente añadimos o eliminamos una clase, o modificamos 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, así que cuando se añade la clase .hidden (que establece la opacidad en 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;
}

Al hacer 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 u oculte un cuadro al hacer clic.

Pasos:

Crea dos variables para almacenar:
- El elemento del botón de alternancia
- El elemento del cuadro que se desvanece
  Usa document.getElementById() para ambos
Añade un detector del evento de clic al botón de alternancia
Cuando se haga clic en el botón, alterna la clase "hidden" en el elemento del cuadro que se desvanece

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>