Wie ich den Übergang zum -Element umgeschaltet habe

Das HTML -Element bietet eine einfache Möglichkeit, erweiterbare und zusammenklappbare Inhaltsabschnitte zu erstellen. Lassen Sie uns untersuchen, wie diese Funktionalität mit reibungslosen CSS -Übergängen verbessert und die Einschränkungen der Verwendung von CSS allein angehen. <details>

Eine grundlegende

Implementierung sieht so aus: <details>

<code class="language-html"><details>
  <summary>Click to expand</summary>
  <p>This is the content.</p>
</details></code>

Während dies funktioniert, ist das Hinzufügen eines reibungslosen Übergangs mit nur CSS eine Herausforderung. Das folgende CSS zum Beispiel erzeugt nicht den gewünschten Effekt:

<code class="language-css">details#my-details {
  transition-duration: 300ms;
}</code>

Um einen reibungslosen Umschaltübergang zu erreichen, ist JavaScript erforderlich.

Lösung

Der Schlüssel besteht darin, den Inhalt in das Element

mit einem anderen Element zu wickeln (hier, a <details>). Dies ermöglicht es uns, den Inhalt separat zu zielen und zu animieren: <div>

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

Der folgende JavaScript -Code übernimmt dann die Animation:

<code class="language-javascript">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);
};</code>

Dieser JavaScript -Code verwendet die Methode

, um den Höhepunkt des Inhaltsumschlags zu steuern. Beachten Sie, dass in einigen Fällen die CSS des Content Wrapper hinzugefügt wird, um optimale Ergebnisse zu erzielen. animate() overflow: hidden; Erläuterung

Der JavaScript -Code verhindert das Standardverhalten, erhält die Inhaltshöhe und verwendet dann die

-Methode, um die Höhe reibungslos anzupassen, basierend darauf, ob sich das

öffnet oder schließt. Die Variable <summary> verhindert, dass mehrere Animationen gleichzeitig ausgeführt werden. animate() <details> Die `isanimating` variable isAnimating

Das

Flag stellt sicher, dass nur eine Animation gleichzeitig ausgeführt wird, wodurch Konflikte und unerwartetes Verhalten verhindert werden, wenn der Benutzer wiederholt klickt, während eine Animation im Gange ist.

Schlussfolgerung isAnimating

Diese Technik bietet einen reibungslosen, kontrollierten Übergang für das

-Element. Während dieses Beispiels die Höhenanimation verwendet, kann die

-Methode an andere CSS -Eigenschaften angepasst werden und bietet einen vielseitigen Ansatz zum Erstellen ansprechender Benutzerinteraktionen. Denken Sie daran, dass ein tieferer Eintauchen in die

-Methode und ihre Fähigkeiten für fortgeschrittenere Animationen empfohlen werden. <details>

Das obige ist der detaillierte Inhalt vonWie ich den Übergang zum

-Element umgeschaltet habe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!