如何使用WAAPI對細節元素進行動畫動畫

使用Web Animations API為原生<details></details>元素創建動畫效果

網站上最常見的動畫需求之一就是手風琴式展開收起效果。有趣的是，jQuery的slideDown()函數早在2006年的第一個版本中就已經存在了。

本文將介紹如何使用Web Animations API為原生的<details></details>元素創建動畫效果。

HTML結構

首先，讓我們看看實現此動畫所需的HTML標記結構。

<details></details>元素需要一個<summary></summary>元素。<summary></summary>是手風琴折疊時可見的內容。<details></details>內的所有其他元素都是手風琴內部內容的一部分。為了方便動畫效果的實現，我們將它們包裹在一個

中。

<details>
  <summary>手風琴標題</summary>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi unde, ex rem voluptates autem aliquid veniam quis temporibus repudiandae illo, nostrum, pariatur quae! At animi modi dignissimos corrupti placeat voluptatum!
    </p>
  </div>
</details>

Accordion類

為了提高代碼的可重用性，我們應該創建一個Accordion類。這樣，我們就可以在頁面上的每個<details></details>元素上調用new Accordion() 。

 class Accordion {
  constructor(el) {}
  onClick(e) {}
  shrink() {}
  open() {}
  expand() {}
  onAnimationFinish(open) {}
}

構造函數constructor()

構造函數用於存儲每個手風琴所需的數據。

 constructor(el) {
  this.el = el;
  this.summary = el.querySelector('summary');
  this.content = el.querySelector('.content');
  this.animation = null;
  this.isClosing = false;
  this.isExpanding = false;
  this.summary.addEventListener('click', (e) => this.onClick(e));
}

onClick()

在onClick()函數中，我們會檢查元素是否正在進行動畫（關閉或展開）。如果用戶在元素正在動畫時點擊手風琴，我們需要進行此檢查。如果點擊速度過快，我們不希望手風琴從完全展開跳到完全關閉。<details></details>元素在打開時，瀏覽器會為其添加一個open屬性。我們可以通過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()

此shrink()函數使用WAAPI的.animate()函數。您可以閱讀MDN文檔了解更多信息。 WAAPI與CSS @keyframes非常相似。我們需要定義動畫的起始和結束關鍵幀。在本例中，我們只需要兩個關鍵幀，第一個是元素的當前高度，第二個是手風琴關閉後的高度。當前高度存儲在startHeight變量中。關閉高度存儲在endHeight變量中，等於<summary></summary>的高度。

 shrink() {
  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({
    height: [startHeight, endHeight]
  }, {
    duration: 400,
    easing: 'ease-out'
  });
  this.animation.onfinish = () => this.onAnimationFinish(false);
  this.animation.oncancel = () => this.isClosing = false;
}

open()

open()函數在我們要展開手風琴時調用。此函數目前不控製手風琴的動畫。首先，我們計算<details></details>元素的高度，並使用內聯樣式將其應用於元素。完成後，我們可以設置其open屬性以使內容可見，但由於我們對元素設置了overflow: hidden和固定高度，因此內容仍然隱藏。然後，我們等待下一幀調用expand()函數並為元素創建動畫。

 open() {
  this.el.style.height = `${this.el.offsetHeight}px`;
  this.el.open = true;
  window.requestAnimationFrame(() => this.expand());
}

expand()

expand()函數類似於shrink()函數，但它不是從當前高度動畫到關閉高度，而是從元素的高度動畫到結束高度。結束高度等於<summary></summary>的高度加上內部內容的高度。

 expand() {
  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({
    height: [startHeight, endHeight]
  }, {
    duration: 400,
    easing: 'ease-out'
  });
  this.animation.onfinish = () => this.onAnimationFinish(true);
  this.animation.oncancel = () => this.isExpanding = false;
}

onAnimationFinish()

此函數在收縮或展開動畫結束時調用。如您所見，有一個參數open ，在手風琴打開時設置為true ，允許我們設置元素上的open HTML屬性，因為它不再由瀏覽器處理。

 onAnimationFinish(open) {
  this.el.open = open;
  this.animation = null;
  this.isClosing = false;
  this.isExpanding = false;
  this.el.style.height = this.el.style.overflow = '';
}

設置手風琴

我們完成了代碼的大部分工作！

剩下的就是為HTML中的每個<details></details>元素使用我們的Accordion類。為此，我們使用<details></details>標籤上的querySelectorAll ，並為每個元素創建一個新的Accordion實例。

 document.querySelectorAll('details').forEach((el) => {
  new Accordion(el);
});

注意

為了計算關閉高度和打開高度，我們需要確保<summary></summary>和內容始終具有相同的高度。

例如，不要嘗試在<summary></summary>打開時添加填充，因為這可能會導致動畫過程中出現跳躍。內部內容也是如此——它應該具有固定高度，我們應該避免在打開動畫過程中高度發生變化的內容。

此外，不要在<summary></summary>和內容之間添加邊距，因為它不會計算高度關鍵幀。相反，直接在內容上使用填充來添加一些間距。

總結

就這樣，我們使用JavaScript創建了一個漂亮的手風琴動畫，無需任何庫！

請注意，圖片的路徑/uploads/20250331/174338369667e9ec90190a3.jpg需要替換成實際的圖片路徑。 我無法訪問或處理圖片文件，所以只能保留原始格式。

以上是如何使用WAAPI對細節元素進行動畫動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！