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 des fondus, des glissements ou des redimensionnements) lorsqu’un élément apparaît ou disparaît.
Nous utilisons les transitions CSS pour cela (abordées dans la section de maîtrise de 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>

La .box possède une transition sur son opacité, donc lorsque la classe .hidden est ajoutée (ce qui définit l’opacité sur 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; /* for class toggle */
  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 bascule qui affiche/masque une boîte lorsqu’il est cliqué.

Étapes :

Créez deux variables pour stocker :
- L’élément bouton bascule
- L’élément boîte avec fondu
  Utilisez document.getElementById() pour les deux
Ajoutez un écouteur d’événement de clic au bouton bascule
Lorsque vous cliquez sur le bouton, basculez la classe "hidden" sur l’élément boîte avec 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>