Comment j'ai effectué la transition vers l'élément

L'élément HTML <details> fournit un moyen simple de créer des sections de contenu extensibles et réductibles. Explorons comment améliorer cette fonctionnalité avec des transitions CSS fluides et abordons les limites de l'utilisation de CSS seul.

Une <details> implémentation de base ressemble à ceci :

<details>
  <summary>Click to expand</summary>
  <p>This is the content.</p>
</details>

Bien que cela fonctionne, l'ajout d'une transition fluide en utilisant uniquement CSS s'avère un défi. Le CSS suivant, par exemple, ne produit pas l'effet souhaité :

details#my-details {
  transition-duration: 300ms;
}

Pour réaliser une transition fluide, JavaScript est nécessaire.

Solution

La clé est d'envelopper le contenu de l'élément <details> avec un autre élément (ici, un <div>). Cela nous permet de cibler et d'animer le contenu séparément :

<details id="my-details">
  <summary>Click to expand</summary>
  <div>
    <p>This is the content.</p>
  </div>
</details>

Le code JavaScript suivant gère alors l'animation :

const details = document.getElementById("my-details");
const summary = details.firstElementChild;
const content = summary.nextElementSibling;
let isAnimating = false;

summary.onclick = (ev) => {
  ev.preventDefault();
  if (isAnimating) return;

  const contentHeight = content.getBoundingClientRect().height;
  isAnimating = true;

  // Closing <details>
  if (details.open) {
    return content
      .animate(
        { height: [contentHeight + 'px', '0px'] },
        { duration: 300 }
      )
      .finished
      .then(() => details.open = isAnimating = false);
  }

  // Opening <details>
  details.open = true;
  content.animate(
    { height: ['0px', contentHeight + 'px'] },
    { duration: 300 }
  ).finished.then(() => isAnimating = false);
};

Ce code JavaScript utilise la méthode animate() pour contrôler la transition de hauteur du wrapper de contenu. Notez que dans certains cas, l'ajout de overflow: hidden; au CSS du wrapper de contenu peut être nécessaire pour des résultats optimaux.

Explication

Le code JavaScript empêche le comportement <summary> par défaut, obtient la hauteur du contenu, puis utilise la méthode animate() pour ajuster en douceur la hauteur selon que le <details> s'ouvre ou se ferme. La variable isAnimating empêche plusieurs animations de s'exécuter simultanément.

La variable `isAnimating`

Le drapeau isAnimating garantit qu'une seule animation s'exécute à la fois, évitant ainsi les conflits et les comportements inattendus si l'utilisateur clique à plusieurs reprises pendant qu'une animation est en cours.

Conclusion

Cette technique permet une transition douce et contrôlée pour l'élément <details>. Bien que cet exemple utilise une animation en hauteur, la méthode animate() peut être adaptée pour animer d'autres propriétés CSS, offrant une approche polyvalente pour créer des interactions utilisateur engageantes. N'oubliez pas qu'une analyse plus approfondie de la méthode animate() et de ses capacités est recommandée pour les animations plus avancées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!