跳至主要内容

動態效果

AppFuse Web 的動態效果以微妙、功能性為原則，透過 DaisyUI 主題變數統一管理動畫時長與行為。

動畫變數​

Fusion 主題定義了以下動畫相關 CSS 變數：

CSS 變數值說明
--animation-btn0.25s按鈕狀態轉換動畫時長
--animation-input0.2s輸入框狀態轉換動畫時長
--btn-focus-scale0.95按鈕按下時的縮放比例

按鈕動畫​

按鈕具備兩種動態回饋：

按下縮放​

按鈕在被按下（:active）時會縮小至 95%，提供明確的觸覺回饋：

--btn-focus-scale: 0.95;  /* 按下時縮放至 95% */

狀態轉換​

按鈕的背景色、邊框色在 hover/focus 狀態間平滑過渡，時長 0.25s。

輸入框動畫​

輸入框相關的動畫時長為 0.2s，比按鈕略快，涵蓋：

  • 邊框色變化（default → focus）
  • Floating Label 位移與縮放
  • Underlined variant 底線展開

元件轉場慣例​

元件轉場屬性時長說明
Buttonbackground, border, transform0.25s包含 hover 變深、active 縮放
Inputborder-color, label position0.2s聚焦邊框、Floating Label
Checkbox/Radiobackground, border—使用 DaisyUI 預設轉場
Switchtransform (thumb position)—滑動切換
Dropdownopacity, transform—展開/收合
Toastopacity, transform—滑入/滑出
Dialogopacity, scale—淡入放大

圖表動畫​

Nivo 圖表使用 gentle 動畫配置，提供流暢但不誇張的資料過渡效果：

const defaultChartConfig = {
  animate: true,
  motionConfig: 'gentle',
}

Easing 慣例​

場景Easing說明
一般狀態轉換ease (CSS 預設)平滑的加速與減速
展開/收合ease-out快速開始、慢慢結束
Checkbox/Radio 觸控回饋transition-colors僅顏色過渡

禁用動畫​

對於偏好減少動態效果的使用者，DaisyUI 會自動回應 prefers-reduced-motion 媒體查詢，減少或停用動畫。

相關文件​