Comment animer l'élément de détails à l'aide de waapi

Utilisez l'API des animations Web pour être natif<details></details> Effets d'animation des éléments

L'une des exigences d'animation les plus courantes sur un site Web est l'effet d'expansion et de clôture de style accordéon. Fait intéressant, la fonction slideDown() de JQuery existait déjà dès la première version en 2006.

Cet article expliquera comment utiliser l'API des animations Web comme natif<details></details> Animer les éléments.

Structure HTML

Tout d'abord, regardons la structure de balise HTML requise pour implémenter cette animation.

<details></details> Un élément en nécessite un<summary></summary> élément.<summary></summary> C'est quelque chose de visible lorsque l'accordéon est plié.<details></details> Tous les autres éléments à l'intérieur font partie du contenu à l'intérieur de l'accordéon. Pour faciliter la mise en œuvre des effets d'animation, nous les enroulons dans un

milieu.

<details>
  <summary>Titre d'accordéon</summary>
  <div class="content">
    <p>
      Lorem ipsum Dolor Sit Amet, COOSTREUR APISICS ELIT. Modi unde, ex rem Voluptates Autem Aliquid Veniam QUis temporibus repudiandae illo, Nostrum, Pariatur Quae! À Animi Modi Dignissimos Corrupti Placeat Voluptatum!
    </p>
  </div>
</details>

Classe d'accordéon

Pour améliorer la réutilisabilité du code, nous devons créer une classe d'accordéon. De cette façon, nous pouvons utiliser chaque<details></details> Appelez new Accordion() sur l'élément.

 classe accordéon {
  constructeur (el) {}
  onclick (e) {}
  rétrécir() {}
  ouvrir() {}
  développer() {}
  onanimationFinish (ouvert) {}
}

constructor()

Le constructeur est utilisé pour stocker les données requises pour chaque accordéon.

 constructeur (el) {
  this.el = el;
  this.summary = el.QuerySelector («résumé»);
  this.Content = el.QuerySelector ('. Content');
  this.animation = null;
  this.isclosing = false;
  this.isexpanding = false;
  this.summary.addeventListener ('click', (e) => this.onclick (e));
}

onClick()

Dans la fonction onClick() , nous vérifions si l'élément est animé (fermer ou développer). Si l'utilisateur clique sur l'accordéon pendant que l'élément est animé, nous devons effectuer ce chèque. Si la vitesse de clic est trop rapide, nous ne voulons pas que l'accordéon passe de complètement étendu à complètement fermé.<details></details> Lorsqu'un élément est ouvert, le navigateur y ajoutera une propriété open . Nous pouvons obtenir la valeur de cette propriété via this.el.open .

 onclick (e) {
  E.PreventDefault ();
  this.el.style.overflow = 'Hidden';
  if (this.isclosing ||! this.el.open) {
    this.open ();
  } else if (this.isexpanding || this.el.open) {
    this.shrink ();
  }
}

shrink()

Cette fonction shrink() utilise la fonction .animate() de WAAPI. Vous pouvez lire la documentation MDN pour plus d'informations. Waapi est très similaire à CSS @keyframes . Nous devons définir les images clés de début et de fin de l'animation. Dans cet exemple, nous n'avons besoin que de deux images clés, la première est la hauteur actuelle de l'élément et la seconde est la hauteur après la fermeture de l'accordéon. La hauteur actuelle est stockée dans la variable startHeight . La hauteur de fermeture est stockée dans la variable endHeight , égale à<summary></summary> hauteur.

 rétrécir() {
  this.isclosing = true;
  const startheight = `$ {this.el.offsetheight} px`;
  const endHeight = `$ {this.summary.offsetheight} px`;
  if (this.animation) {
    this.animation.cancel ();
  }
  this.animation = this.el.animate ({{{
    Hauteur: [StarTheight, Endheight]
  }, {
    Durée: 400,
    facilité: «facilité de sortie»
  });
  this.animation.onfinish = () => this.onanimationFinish (false);
  this.animation.oncancel = () => this.isclosing = false;
}

open()

La fonction open() est appelée lorsque nous voulons étendre l'accordéon. Cette fonction ne contrôle actuellement pas l'animation de l'accordéon. Premièrement, nous calculons<details></details> La hauteur de l'élément et l'appliquez à l'élément en utilisant le style en ligne. Une fois terminé, nous pouvons définir sa propriété open pour rendre le contenu visible, mais comme nous avons défini overflow: hidden et fixe pour l'élément, le contenu est toujours masqué. Ensuite, nous attendons que la trame suivante appelle la fonction expand() et créons une animation pour l'élément.

 ouvrir() {
  this.el.style.height = `$ {this.el.offsetheight} px`;
  this.el.open = true;
  window.requestanimationFrame (() => this.expand ());
}

expand()

La fonction expand() est similaire à la fonction shrink() , mais elle ne fait pas d'animation de la hauteur actuelle à la hauteur de fermeture, mais de la hauteur de l'élément à la hauteur d'extrémité. La hauteur de fin est égale à<summary></summary> hauteur plus la hauteur du contenu interne.

 développer() {
  this.isexpanding = true;
  const startheight = `$ {this.el.offsetheight} px`;
  const endHeight = `$ {this.summary.offsetheight this.content.offsetheight} px`;
  if (this.animation) {
    this.animation.cancel ();
  }
  this.animation = this.el.animate ({{{
    Hauteur: [StarTheight, Endheight]
  }, {
    Durée: 400,
    facilité: «facilité de sortie»
  });
  this.animation.onfinish = () => this.onanimationFinish (true);
  this.animation.oncancel = () => this.isexpanding = false;
}

onAnimationFinish()

Cette fonction est appelée lorsque l'animation est effondrée ou élargie. Comme vous pouvez le voir, il y a un paramètre open , défini sur true lorsque l'accordéon est activé, nous permettant de définir l'attribut HTML open sur l'élément, car il n'est plus géré par le navigateur.

 onanimationFinish (ouvert) {
  this.el.open = open;
  this.animation = null;
  this.isclosing = false;
  this.isexpanding = false;
  this.el.style.height = this.el.style.overflow = '';
}

Configurer l'accordéon

Nous avons fait la majeure partie du code!

Il ne reste plus que pour chacun des HTML<details></details> Les éléments utilisent notre classe d'accordéon. Pour ce faire, nous utilisons<details></details> querySelectorAll sur la balise et créez une nouvelle instance d'accordéon pour chaque élément.

 document.QuerySelectorall ('Détails'). ForEach ((el) => {
  Nouveau accordéon (EL);
});

Avis

Pour calculer la hauteur de fermeture et la hauteur ouverte, nous devons nous assurer<summary></summary> Ont toujours la même hauteur que le contenu.

Par exemple, n'essayez pas<summary></summary> Ajoutez un rembourrage lorsqu'il est allumé, car cela peut provoquer des sauts pendant le processus d'animation. Il en va de même pour le contenu interne - il devrait avoir une hauteur fixe, et nous devons éviter le contenu avec des changements de hauteur pendant l'ouverture de l'animation.

Aussi, ne pas<summary></summary> Ajoutez des marges entre le contenu, car il ne calcule pas les images clés de hauteur. Au lieu de cela, utilisez un rembourrage directement sur le contenu pour ajouter un espacement.

Résumer

C'est tout, nous avons créé une belle animation d'accordéon en utilisant JavaScript sans aucune bibliothèque requise!

Veuillez noter que le chemin d'image /uploads/20250331/174338369667e9ec90190a3.jpg 174338369667e9ec90190a3.jpg doit être remplacé par le chemin d'image réel. Je ne peux pas accéder ou traiter le fichier image, je ne peux donc garder le format d'origine.

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!