CHAPTER 10 · PRACTICE WORKSPACE

狀態、轉場、動畫與 CTA

有目的、可操作且尊重減少動態偏好的互動回饋

02 Checkpoint 1 1/3
  1. 01Starter讀懂作品骨架
  2. 02Checkpoint 1加入第一項能力
  3. 03Checkpoint 2累積第二項能力
  4. 04Solution核對完整結果

TASK STATUS

三項任務目前狀態

TASK-01已完成

讓 CTA 的滑入、按下與鍵盤焦點可辨識

修改檔案：style.css

完成後看見：按鈕有平順位移、按壓回饋與焦點框

TASK-02本階段處理

替處理中徽章加入有限度的動畫

修改檔案：style.css

完成後看見：處理中標籤以淡入淡出提示狀態

TASK-03稍後處理

尊重減少動態效果偏好

修改檔案：style.css

完成後看見：系統偏好減少動態時取消轉場與動畫

WORKSPACE

本階段實作區

已完成 TASK-01；先核對可見結果，再前往 TASK-02。

FOCUS TASK · TASK-02

現在只處理：替處理中徽章加入有限度的動畫

修改：style.css

完成後：處理中標籤以淡入淡出提示狀態

講解時展開：2 個小型比較

Keyframes｜讓處理中狀態有時間分鏡

比較：@keyframes 描述一段會自行播放的時間流程，適合處理中等需要持續提示的狀態。

現在做：先暫時讓 .status-pill 加上 transition: opacity 400ms ease，並用 .status-pill:hover 改變 opacity；再移除 hover，改用 @keyframes status-pulse 與 animation，重新整理後觀察數秒。

看預期與證據

預期：徽章能有限度淡入淡出，且學生能說明 transition 與 animation 的用途差異。

證據：錄下 transition 不能自行循環、keyframes 可以播放時間分鏡的前後比較。

Animation vs transition｜自動播放與狀態切換

比較：transition 需要狀態改變才切換，animation 可依 keyframes 自行播放；處理中提示才適合後者。

現在做：先把 .status-pill 的 animation 暫時改成 hover 才改變 opacity，再移除 hover 並恢復 animation，比較重新整理後是否會自行播放。

看預期與證據

預期：學生能指出 hover 觸發的是狀態切換，重新整理後自行淡入淡出的是時間動畫。

證據：展示 hover 版與 animation 版的前後操作，口述兩者的觸發條件與使用時機。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：在 Checkpoint 1 確認 CTA 的 hover、active、focus-visible 已可分辨，接著觀察處理中徽章仍完全靜止。
  2. B｜預測：重新整理後等待數秒，觀察處理中徽章是否有限度地淡入淡出。
  3. C｜實作：在 style.css 的 .status-pill 與 @keyframes status-pulse 完成「替處理中徽章加入有限度的動畫」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 .status-pill 與 @keyframes status-pulse 與 style.css，最後重跑原操作。
  5. E｜驗收：處理中標籤以淡入淡出提示狀態

完成條件：DONE-02：處理中標籤以淡入淡出提示狀態

作品正在準備

讓互動回饋有目的

先用 Tab 找到按鈕，再用滑鼠比較滑入、按下與等待狀態。

查看作品成果

沒有動畫時，這段重要說明仍然可讀。

第 09 章 → 第 10 章

把已完成的元件，變成可感知的狀態

保留第 09 章的按鈕與卡片基底；本章只新增 hover、focus、處理中動畫與 reduced-motion，下一章再用 DevTools 追查它們的 CSS 來源。

CONTINUE

繼續完成 TASK-02

前往 Checkpoint 2，依要求完成「替處理中徽章加入有限度的動畫」。

前往 Checkpoint 2：完成 TASK-02