Transitions CSS

Fait partie de la section JavaScript en action du Journey HTML de Coddy. Leçon 18 sur 27.

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

HTML :

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

La .box a une transition sur son opacité, donc 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ée un bouton bascule qui affiche/masque une boîte lorsqu’on clique dessus.

Étapes :

Crée deux variables pour stocker :
- L’élément du bouton bascule
- L’élément de la boîte à fondu
  Utilise document.getElementById() pour les deux
Ajoute un écouteur d’événement de clic au bouton bascule
Lorsque le bouton est cliqué, bascule la classe "hidden" sur l’élément de la boîte à 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>