動畫不會播放 – ZenBlocks buttonBasic
結論
動畫不動通常是因為 **前置元素未設定、動畫類型判斷錯誤,或只在編輯器中檢查**。
—
原因
| 動畫類型 | 觸發時機 | 前置條件 |
|—|—|—|
| 文字動畫 | 持續播放 | 必須有文字 |
| 圖示動畫 | 持續播放 | 必須設定圖示 |
| 框架動畫 | 持續播放 | 必須啟用圖示框架 |
| 按鈕動畫 | 持續播放 | 無 |—
解決步驟
### 步驟 1:確認動畫類型
1. 先確認你設定的是文字、圖示、框架或按鈕動畫。
2. 開啟對應設定面板。
3. 確認預設值不是 `none`。### 步驟 2:確認前置條件
– **文字動畫**:主文字已輸入。
– **圖示動畫**:圖示已選取。
– **框架動畫**:圖示框架已啟用。
– **按鈕動畫**:無特定前置條件。### 步驟 3:在前台測試
1. 開啟實際前台頁面。
2. Hover 動畫(文字/圖示/按鈕)用滑鼠移入測試。
3. 持續型動畫(框架)確認載入頁面後是否立即播放。### 步驟 4:檢查轉場參數
1. 開啟轉場設定。
2. 確認 `Duration` 不會過短。
3. 確認 `Delay` 不會過長。—
注意事項
– 文字動畫逐字延遲最多套用到 30 字。
– `neon-01` / `glow-01` 因 `box-shadow` 可能超出按鈕範圍。
– 啟用圖示動畫時,圖示顯示控制會由該模組接管。—
相關設定
– [文字動畫設定](../animation/text-animation/)
– [圖示動畫設定](../animation/icon-animation/)
– [框架動畫設定](../animation/frame-animation/)
– [按鈕動畫設定](../animation/button-animation/)
– [圖示設定](../button/icon/)