<details>
  <summary>Akkordeontitel</summary>
  <div class="content">
    <p>
      Lorem Ipsum Dolor Sit Amet, Konsistende apisicing elit. Modi Une, Ex Coluptates Autem Aliquid Veniam Quis temporibus Repudiandae Illo, Nostrum, Pariatur Quae! Bei Animi Modi Dignissimos Corrupi platziert vuptatum!
    </p>
  </div>
</details>

Akkordeonklasse

Um die Wiederverwendbarkeit des Codes zu verbessern, sollten wir eine Akkordeonklasse erstellen. Auf diese Weise k?nnen wir jeden verwenden<details></details> Rufen Sie new Accordion() auf dem Element an.

 Klassenakkordeon {
  Konstruktor (el) {}
  Onclick (e) {}
  Shrink () {}
  offen() {}
  expandieren() {}
  onanimationfinish (ge?ffnet) {}
}

constructor()

Der Konstruktor wird verwendet, um die für jedes Akkordeon erforderlichen Daten zu speichern.

 Konstruktor (el) {
  this.el = el;
  this.summary = el.querySelector ('Zusammenfassung');
  this.content = el.querySelector ('. Inhalt');
  this.Animation = null;
  this.isclosing = false;
  this.isexpanding = false;
  this.summary.adDeVentListener ('klick', (e) => this.onclick (e));
}

onClick()

In der Funktion onClick() überprüfen wir, ob das Element animiert ist (schlie?en oder ausdehnen). Wenn der Benutzer auf das Akkordeon klickt, w?hrend das Element animiert ist, müssen wir diese überprüfung durchführen. Wenn die Klickgeschwindigkeit zu schnell ist, m?chten wir nicht, dass das Akkordeon von vollst?ndig erweitert auf vollst?ndig geschlossen wird.<details></details> Wenn ein Element ge?ffnet wird, fügt der Browser eine open Eigenschaft hinzu. Wir k?nnen den Wert dieser Eigenschaft durch this.el.open erhalten.EL.Open.

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

shrink()

Diese shrink() -Funktion verwendet die .animate() -Funktion von WAAPI. Sie k?nnen die MDN -Dokumentation für weitere Informationen lesen. WAAPI ist CSS @keyframes sehr ?hnlich. Wir müssen die Start- und Keyframes der Animation definieren. In diesem Beispiel ben?tigen wir nur zwei Keyframes, die erste ist die aktuelle H?he des Elements und die zweite ist die H?he nach dem Abschluss des Akkordeons. Die aktuelle H?he wird in der startHeight -Variable gespeichert. Eine enge H?he wird in der endHeight -Variable gespeichert, die entspricht<summary></summary> H?he.

 Shrink () {
  this.isclosing = true;
  const startheight = `$ {this.el.offseteight} px`;
  const endHeight = `$ {this.summary.offseteight} px`;
  if (this.Animation) {
    this.Animation.cancel ();
  }
  this.Animation = this.el.animate ({{
    H?he: [Startheigheight, EndHeight]
  }, {
    Dauer: 400,
    Leichtigkeit: 'Eventual-Out'
  });
  this.Animation.onfinish = () => this.onanimationFinish (falsch);
  this.Animation.oncancel = () => this.isclosing = false;
}

open()

Die Funktion open() wird aufgerufen, wenn wir das Akkordeon erweitern m?chten. Diese Funktion steuert derzeit die Akkordeon -Animation nicht. Zuerst berechnen wir<details></details> Die H?he des Elements und wenden Sie es unter Verwendung des Inline -Stils auf das Element an. Sobald wir fertig sind, k?nnen wir seine open Eigenschaft festlegen, um den Inhalt sichtbar zu machen. Da wir jedoch overflow: hidden und feste H?he für das Element, ist der Inhalt immer noch versteckt. Anschlie?end warten wir darauf, dass der n?chste Frame die Funktion expand() aufruft und eine Animation für das Element erstellt.

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

expand()

Die Funktion expand() ?hnelt der shrink() -Funktion, die jedoch nicht von der aktuellen H?he bis zur engen H?he, sondern von der H?he des Elements bis zur Endh?he animiert. Die Endh?he ist gleich<summary></summary> H?he plus H?he des internen Inhalts.

 expandieren() {
  this.isexpanding = true;
  const startheight = `$ {this.el.offseteight} px`;
  const endHeight = `$ {this.summary.offseteight this.content.offseteight} px`;
  if (this.Animation) {
    this.Animation.cancel ();
  }
  this.Animation = this.el.animate ({{
    H?he: [Startheigheight, EndHeight]
  }, {
    Dauer: 400,
    Leichtigkeit: 'Eventual-Out'
  });
  this.Animation.onfinish = () => this.onanimationfinish (true);
  this.Animation.oncancel = () => this.isexpanding = false;
}

onAnimationFinish()

Diese Funktion wird aufgerufen, wenn die Animation zusammengebrochen oder erweitert wird. Wie Sie sehen k?nnen, ist ein Parameter open und auf true gesetzt, wenn das Akkordeon eingeschaltet ist, sodass wir das open HTML -Attribut auf dem Element einstellen k?nnen, da es nicht mehr vom Browser behandelt wird.

 onanimationfinish (offen) {
  this.el.open = offen;
  this.Animation = null;
  this.isclosing = false;
  this.isexpanding = false;
  this.el.style.height = this.el.style.overflow = '';
}

Akkordeon einrichten

Wir haben den gr??ten Teil des Codes gemacht!

Alles, was übrig bleibt, ist für jedes der HTML<details></details> Elemente verwenden unsere Akkordeonklasse. Zu diesem Zweck verwenden wir<details></details> querySelectorAll auf dem Tag und erstellen Sie für jedes Element eine neue Akkordeoninstanz.

 document.querySelectorAll ('Details'). foreach ((el) => {
  neues Akkordeon (EL);
});

Beachten

Um die enge H?he und die offene H?he zu berechnen, müssen wir sicherstellen<summary></summary> Hab immer die gleiche H?he wie der Inhalt.

Versuchen Sie zum Beispiel nicht<summary></summary> Fügen Sie die Polsterung hinzu, wenn Sie eingeschaltet werden, da dies w?hrend des Animationsprozesses zu Sprüngen führen kann. Gleiches gilt für interne Inhalte - es sollte eine feste H?he haben, und wir sollten Inhalte mit H?hen?nderungen w?hrend der Animations?ffnung vermeiden.

Auch nicht<summary></summary> Fügen Sie die R?nder zwischen den Inhalten hinzu, da es keine H?henschlüsselrahmen berechnet. Verwenden Sie stattdessen die Polsterung direkt auf dem Inhalt, um einen gewissen Abstand hinzuzufügen.

Zusammenfassen

Das war's, wir haben eine wundersch?ne Akkordeon -Animation mit JavaScript ohne Bibliotheken erstellt!

Bitte beachten Sie, dass der Bildpfad /uploads/20250331/174338369667e9ec90190a3.jpg 174338369667e9ec90190a3.jpg durch den tats?chlichen Bildpfad ersetzt werden muss. Ich kann nicht auf die Bilddatei zugreifen oder verarbeiten, damit ich nur das ursprüngliche Format beibehalten kann.