寫一個高度從0到auto的transition動畫

王铁柱6發表於2024-11-30
動畫

要實現高度從 0 到 auto 的平滑過渡動畫，單純使用 CSS 的 transition: height 是無法直接實現的。因為 auto 不是一個具體的數值，瀏覽器無法計算從 0 到 auto 的過渡值。

以下提供幾種實現方案，並解釋其優缺點：

1. 使用 max-height 模擬 auto:

這是最常用的方法，設定一個足夠大的 max-height 值，使其在實際內容高度小於 max-height 時表現得像 auto。

.container {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-in-out; /* 調整過渡時間和效果 */
}

.container.open {
  max-height: 500px; /* 設定一個足夠大的值 */
}
  • 優點: 簡單易用，相容性好。
  • 缺點: 需要預估 max-height 的值，如果實際內容高度超過了 max-height，內容會被裁剪。

2. 使用 JavaScript 計算高度:

使用 JavaScript 獲取元素的實際高度，然後將其設定為元素的高度，並觸發 CSS transition。

const container = document.querySelector('.container');

function toggleHeight() {
  if (container.classList.contains('open')) {
    container.style.height = '0';
    container.classList.remove('open');
  } else {
    container.style.height = 'auto'; // 先設定為 auto 獲取高度
    const height = container.offsetHeight; // 獲取實際高度
    container.style.height = '0'; // 重新設定為 0，準備動畫
    // 使用 requestAnimationFrame 確保在下一幀渲染時設定高度，以觸發動畫
    requestAnimationFrame(() => {
      container.style.height = height + 'px';
      container.classList.add('open');
    });
  }
}

container.addEventListener('click', toggleHeight);

.container {
  overflow: hidden;
  height: 0;
  transition: height 0.3s ease-in-out;
}
  • 優點: 精確控制高度，無需預估 max-height。
  • 缺點: 需要 JavaScript 程式碼，略微複雜。

3. 使用 CSS transform 的 scaleY:

利用 transform: scaleY(0) 和 transform: scaleY(1) 來實現高度的過渡效果。

.container {
  overflow: hidden;
  transform: scaleY(0);
  transform-origin: top; /* 從頂部開始縮放 */
  transition: transform 0.3s ease-in-out;
}

.container.open {
  transform: scaleY(1);
}
  • 優點: 無需預估高度，也無需 JavaScript 程式碼。
  • 缺點: 可能會影響內部元素的佈局，尤其是在使用絕對定位或固定定位的元素時。 內容實際佔據空間，即使scaleY(0)時，也佔據著位置。

選擇哪種方案取決於你的具體需求:

  • 對於內容高度可預測的情況，max-height 方案最為簡單。
  • 對於內容高度動態變化的情況，JavaScript 方案最為精確。
  • 如果不希望使用 JavaScript，並且對佈局影響不敏感，可以考慮 scaleY 方案。

記住在 CSS 中新增 overflow: hidden; 以防止內容在過渡過程中溢位。 同時，根據需要調整過渡時間和效果 (例如 ease-in-out, ease-in, ease-out 等)。

希望以上資訊能夠幫助你!

相關文章