我如何使切換過渡到<詳細信息>元素

<code class=" language-html><details> <summary>Click to expand</summary> <p>This is the content.</p> </details> </p> <p>>在這種情況下，僅使用CSS添加平穩的過渡是有挑戰性的。 例如，以下CSS不會產生所需的效果：</p>> <pre class="brush:php;toolbar:false"><code class="language-css">details#my-details { transition-duration: 300ms; }</code>

要實現平滑的切換過渡，javaScript是必要的。

解決方案

關鍵是將內容與另一個元素包裹在

>元素中（此處為a<details>）。 這使我們能夠分別定位和對內容進行動畫：<div>

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

以下JavaScript代碼然後處理動畫：>

此JavaScript代碼使用

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

>方法來控制內容包裝器的高度過渡。 請注意，在某些情況下，可能需要在內容包裝器的CSS中添加

才能獲得最佳結果。 animate()>說明overflow: hidden;

> JavaScript代碼可防止默認的

行為，獲取內容高度，然後使用

>方法來平穩地調整高度，以基於

打開還是關閉。 <summary>變量可防止多個動畫同時運行。 animate()`i animating`變量<details> isAnimating>

標誌確保只有一個動畫一次運行，如果用戶在進行動畫時重複單擊時，可以防止衝突和意外行為。

結論

>該技術為元素提供了平滑，受控的過渡。 雖然此示例使用高度動畫，但可以對其他CSS屬性進行調整isAnimating方法，從而為創建引人入勝的用戶交互提供了多功能方法。 請記住，建議更深入地研究

的方法及其功能以進行更高級的動畫。

>

以上是我如何使切換過渡到<詳細信息>元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！