CHAPTER 10 · PRACTICE WORKSPACE

狀態、轉場、動畫與 CTA

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

03 Checkpoint 2 2/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-02；先核對可見結果，再前往 TASK-03。

FOCUS TASK · TASK-03

現在只處理：尊重減少動態效果偏好

修改：style.css

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

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

Reduced motion｜降低動態但保留狀態

比較：prefers-reduced-motion 回應使用者的系統偏好；應降低或停止非必要移動，但不能刪掉狀態訊息。

現在做：在 DevTools 或作業系統開啟減少動態效果，加入 @media (prefers-reduced-motion: reduce)，關閉 transition 與 animation 後重新操作。

看預期與證據

預期：動態停止或縮短，但 CTA 的可操作性、焦點框與處理中文字仍然存在。

證據：展示一般模式與 reduced-motion 模式的差異，並指出哪些狀態證據被保留下來。

狀態訊息 vs 動態裝飾｜取消移動不取消回饋

比較：reduced-motion 應移除非必要移動，但仍保留處理中文字、焦點框與可操作狀態。

現在做：先在一般模式記錄 CTA 焦點框與處理中文字，再開啟 reduced-motion，關閉 transform 與 animation 後重新操作並比較仍留下的證據。

看預期與證據

預期：動態可以停止，但使用者仍能知道目前焦點、按鈕狀態與處理進度。

證據：並排展示一般模式與 reduced-motion 模式，圈出被取消的移動與仍保留的狀態訊息。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：在 Checkpoint 2 確認 CTA 與徽章都有有限度動態，再開啟作業系統減少動態偏好，觀察它們目前仍會播放。
  2. B｜預測：在作業系統開啟「減少動態效果」後重新整理，確認轉場與動畫停止。
  3. C｜實作：在 style.css 的 @media (prefers-reduced-motion: reduce) 完成「尊重減少動態效果偏好」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 @media (prefers-reduced-motion: reduce) 與 style.css，最後重跑原操作。
  5. E｜驗收：系統偏好減少動態時取消轉場與動畫

完成條件：DONE-03：系統偏好減少動態時取消轉場與動畫

作品正在準備

讓互動回饋有目的

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

查看作品成果

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

第 09 章 → 第 10 章

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

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

CONTINUE

繼續完成 TASK-03

前往 Solution，依要求完成「尊重減少動態效果偏好」。

前往 Solution：完成 TASK-03