LESSON-13 · TOPIC 01
能先判斷 property 是否具可插值 animation type，再選擇 opacity 等能觀察中間值的 transition。
能先判斷 property 是否具可插值 animation type，再選擇 opacity 等能觀察中間值的 transition。
對 display 等沒有連續中間值的狀態期待平滑過場，會得到瞬間切換或不一致行為。
要修改的檔案：files/starter/index.html
定位：先查 MDN animation type，再在 Computed 確認 transition-property 真的是 opacity。｜依 starter-1 定位，只修改「可動畫屬性」的責任。
先結果，再原理；完成後要能說出自己看見的證據。
提示框使用 display:none/block 加 transition，但畫面總是瞬間出現。
起始狀態：提示框保持 display:block 供測試，opacity:0，尚未加入 visible-state。
現有 runtime opacity 由0變1；required facts transitionRun/transitionEnd=true，midpoint 位於0與1之間。
驗收證據：before=0、after=1、transitionRun=true、transitionEnd=true、midpoint介於0與1
hover、展開、顯示/隱藏或狀態切換需要平滑視覺回饋時。
常見混淆：允許 transition 不代表每個 property 都有效能合適；可動畫與適合動畫是兩個問題。
這段程式是理解起點，不是要你直接跳過 Starter。
有些值能像旋鈕一格一格轉過去，有些只像開關瞬間換；先確認能不能產生中間值。
正式說法：Each CSS property has an animation type that determines interpolation/composition behavior；numeric opacity interpolates continuously, while non-interpolable/discrete state changes do not produce the same continuous values。
.notice{opacity:0;transition:opacity .2s}.notice.is-visible{opacity:1}每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
檔案：files/starter/index.html 定位：先查 MDN animation type，再在 Computed 確認 transition-property 真的是 opacity。
要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先查 MDN animation type，再在 Computed 確認 transition-property 真的是 opacity。」目前的缺口。
證據：保存 files/starter/index.html 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/index.html，且定位到 先查 MDN animation type，再在 Computed 確認 transition-property 真的是 opacity。。
檔案：files/starter/index.html 定位：先查 MDN animation type，再在 Computed 確認 transition-property 真的是 opacity。
要做：執行實驗切換 visible-state，讀 opacity before/after；完整 lifecycle probe 記錄事件與 midpoint。
預期：現有 runtime opacity 由0變1；required facts transitionRun/transitionEnd=true，midpoint 位於0與1之間。
證據：before=0、after=1、transitionRun=true、transitionEnd=true、midpoint介於0與1
卡住先查：先查 MDN animation type，再在 Computed 確認 transition-property 真的是 opacity。
檔案：files/starter/index.html 定位：先查 MDN animation type，再在 Computed 確認 transition-property 真的是 opacity。
要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：現有 runtime opacity 由0變1；required facts transitionRun/transitionEnd=true，midpoint 位於0與1之間。
證據：before=0、after=1、transitionRun=true、transitionEnd=true、midpoint介於0與1
卡住先查：先查 MDN animation type，再在 Computed 確認 transition-property 真的是 opacity。
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
已儲存變更
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
先用 opacity 建立可連續量測的最小實驗。
監聽 transitionrun/end，並在中途讀一次 computed opacity。
完整解答與原因：opacity 能在0到1插值，因此有 midpoint 與 lifecycle events；display 的狀態切換不應拿來取代淡入本身。