JS 與 CSS 實現 Firefox 首頁風格主題切換滑動效果

效果拆解

Firefox 首頁點擊換膚按鈕後，頁面頂部平滑滑出一個面板展示主題縮圖，再次點擊或點擊外部則滑回收合。

核心實作思路

1. 結構：在 body 頂端置入一個 div#themePanel，預設 height: 0; overflow: hidden;。
2. 觸發：按鈕點擊切換類別 .open。
3. 動畫：使用 CSS Transition 或 JS 動畫將 height 從 0 變為目標高度（如 300px）。
4. 流暢度優化：改用 transform: translateY() 配合 will-change，避免重排。

CSS 範例

#themePanel {
  position: fixed; top: 0; left: 0; right: 0;
  height: 0; overflow: hidden;
  background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15);
  transition: height .3s ease-out;
  z-index: 1000;
}
#themePanel.open { height: 300px; }

JavaScript 範例

const btn = document.getElementById('themeBtn');
const panel = document.getElementById('themePanel');
btn.addEventListener('click', () => panel.classList.toggle('open'));

// 點擊面板外部關閉
document.addEventListener('click', e => {
  if (!panel.contains(e.target) && !btn.contains(e.target)) panel.classList.remove('open');
});

進階：自訂緩動函數

若需如 Firefox 般的彈性感，可使用 cubic-bezier(0.34, 1.56, 0.64, 1) 或引入 anime.js/GSAP 實現彈簧動畫。