So animieren Sie das Detailelement mit WAAPI

Verwenden Sie die Webanimationen -API, um nativ zu sein<details></details> Animationseffekte von Elementen

Eine der häufigsten Anforderungen an die Animation auf einer Website ist die Erweiterung und Abschlusswirkung im Akkordeonstil. Interessanterweise existierte die slideDown() -Funktion von Jquery bereits in der ersten Version im Jahr 2006.

In diesem Artikel wird erklärt<details></details> Animierte Elemente.

HTML -Struktur

Schauen wir uns zunächst die HTML -Tag -Struktur an, die zur Implementierung dieser Animation erforderlich ist.

<details></details> Ein Element erfordert eines<summary></summary> Element.<summary></summary> Es ist etwas sichtbar, wenn das Akkordeon gefaltet ist.<details></details> Alle anderen Elemente innerhalb sind Teil des Inhalts im Akkordeon. Um die Implementierung von Animationseffekten zu erleichtern, wickeln wir sie in einen ein

Mitte.

<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.

Das obige ist der detaillierte Inhalt vonSo animieren Sie das Detailelement mit WAAPI. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!