Transitions CSS

Fait partie de la section JavaScript in Action du Journey HTML de Coddy — leçon 18 sur 27.

Parfois, nous voulons créer des animations fluides (comme le fondu, le glissement ou le redimensionnement) lorsqu'un élément apparaît ou disparaît.
Nous utilisons des transitions CSS pour cela (abordées dans la section Maîtrise du CSS). En JavaScript, nous ajoutons ou supprimons simplement une classe — ou modifions les propriétés de style.

HTML :

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

L'élément .box possède une transition sur son opacité, ainsi, lorsque la classe .hidden est ajoutée (ce qui définit l'opacité à 0), la boîte s'estompe au lieu de disparaître instantanément.

.box {
  width: 100px;
  height: 100px;
  background-color: teal;
  transition: opacity 0.5s ease; /* pour le basculement de classe */
  opacity: 1;
}

.hidden {
  opacity: 0;
}

Lorsque le bouton est cliqué - la boîte s'estompe :

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

button.addEventListener("click", function () {
  // l'opacité s'estompe
  box.classList.toggle("hidden");
});

Défi

Facile

Créez un bouton de bascule qui affiche/masque une boîte lorsqu'on clique dessus.

Étapes :

Créez deux variables pour stocker :
- L'élément du bouton de bascule
- L'élément de la boîte de fondu
  Utilisez document.getElementById() pour les deux
Ajoutez un écouteur d'événement de clic au bouton de bascule
Lorsque le bouton est cliqué, basculez la classe "hidden" sur l'élément de la boîte de fondu

Essayez vous-même

<!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>