技能 animated-focus
🎯
animated-focus
安全 🌐
網路存取📁
檔案系統存取⚙️
外部命令
使用 CSS 動畫修復鍵盤焦點
動畫 UI 元件在瀏覽器拒絕對不可見元素呼叫焦點時，可能會破壞鍵盤導航。此技能提供了一種重試機制模式，確保在 CSS 動畫完成後焦點成功，使動畫元件完全可存取。
支援: Claude Codex Code(CC)
1
下載技能 ZIP
2
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
3
開啟並開始使用
測試它
正在使用「animated-focus」。 我的動畫 popover 在使用鍵盤打開後無法聚焦
預期結果:
- 根本原因：CSS 動畫從 opacity:0 開始，瀏覽器拒絕對不可見元素聚焦
- 解決方案：使用 requestAnimationFrame + 帶有 document.activeElement 檢查的重試循環
- 實作：focusElement() 在 20ms 間隔下進行 5 次嘗試（最多 100ms）
- 關鍵代碼模式：requestAnimationFrame(() => tryFocus(5))
- 測試方式：Playwright 測試驗證動畫打開/關閉/導航/按 Escape 關閉
正在使用「animated-focus」。 如何測試鍵盤導航在我的動畫 Select 元件上是否正常運作？
預期結果:
- 建立 Playwright 測試：AnimatedSelect_ShouldOpen_OnEnterKey
- 建立測試：AnimatedSelect_ShouldNavigate_WithArrowKeys
- 建立測試：AnimatedSelect_ShouldSelect_OnEnterKey
- 建立測試：AnimatedSelect_ShouldClose_OnEscape
- 執行測試：dotnet run --project tests/SummitUI.Tests.Playwright -- --treenode-filter '/*/*/*/Animated*'
安全審計
安全v5 • 1/16/2026
This skill is documentation-only (SKILL.md) containing no executable code. All 43 static findings are false positives: backtick characters are markdown code formatting syntax, not shell execution; metadata URL and filesystem fields are configuration, not operations; no cryptographic algorithms or actual code exist in this content.
2
已掃描檔案
345
分析行數
3
發現項
5
審計總數
風險因素
🌐 網路存取 (1)
📁 檔案系統存取 (1)
⚙️ 外部命令 (34)
SKILL.md:12 SKILL.md:12 SKILL.md:12 SKILL.md:23 SKILL.md:23 SKILL.md:24 SKILL.md:31-37 SKILL.md:37-41 SKILL.md:41-45 SKILL.md:45-69 SKILL.md:69-73 SKILL.md:73-74 SKILL.md:74-77 SKILL.md:77 SKILL.md:77-81 SKILL.md:81-82 SKILL.md:82-90 SKILL.md:90-122 SKILL.md:122-130 SKILL.md:130-131 SKILL.md:131-132 SKILL.md:132-133 SKILL.md:133-137 SKILL.md:137-139 SKILL.md:139-145 SKILL.md:145 SKILL.md:145 SKILL.md:145-146 SKILL.md:146 SKILL.md:146-147 SKILL.md:147 SKILL.md:147-148 SKILL.md:148-155 SKILL.md:155
審計者: claude 查看審計歷史 →
品質評分
38
架構
100
可維護性
87
內容
31
社群
100
安全
91
規範符合性
你能建構什麼
修復動畫 Select 元件
在使用箭頭鍵打開時失敗的動畫下拉選擇元件中啟用鍵盤導航
使用動畫測試焦點
使用 Playwright 測試驗證動畫 UI 元件通過 WCAG 焦點管理要求
實作浮動元件
使用 CSS 打開/關閉動畫建構可存取的浮動元件（Popover、DropdownMenu）
試試這些提示
診斷焦點問題
我的下拉元件使用滑鼠可以打開，但加入動畫類別後鍵盤導航失敗。開啟後箭頭鍵無法運作。我該如何修復使用 CSS 動畫時的焦點問題？
實作重試邏輯
我需要為動畫元件實作帶有重試機制的 focusElement 函數。使用 requestAnimationFrame 和 20ms 延遲的 setTimeout 向我展示 JavaScript 代碼。
撰寫無障礙測試
撰寫 Playwright 測試以驗證鍵盤導航在動畫 Select、DropdownMenu 和 Popover 元件上正常運作。包括 Enter 鍵打開、箭頭鍵導航和 Escape 鍵關閉的測試。
應用於 Blazor 元件
展示如何將焦點重試機制整合到 Blazor 元件中。SelectContent.cs、DropdownMenuContent.cs 和 PopoverContent.cs 中需要什麼變更？
最佳實務
- 在使用 requestAnimationFrame 嘗試聚焦之前確保 CSS 已套用
- 通過檢查 document.activeElement 來驗證焦點是否成功
- 限制重試次數以防止無限循環（5 次嘗試，每次 20ms = 最多 100ms）
- 將焦點重試應用於所有焦點函數（focusElement 和 focusElementById）
避免
- 在不等 CSS 動畫進行的情況下立即呼叫 focus()
- 不檢查 document.activeElement 來驗證焦點是否真的成功
- 在沒有 requestAnimationFrame 的情況下使用固定延遲（可能與 CSS 渲染不同步）
- 僅對部分元件套用焦點重試，而其他元件仍保持故障狀態
常見問題
什麼導致鍵盤導航在使用 CSS 動畫時失敗？
從 opacity:0 開始的動畫會使元素不可見。瀏覽器會拒絕對不可見元素的 focus() 呼叫，導致焦點停留在觸發器上。
重試延遲應該持續多長時間？
使用 20ms 間隔和 5 次嘗試（總共 100ms）。這允許大多數動畫在 past opacity:0 的同時不會產生明顯的延遲。
這適用於所有動畫類型嗎？
是的。重試機制適用於任何動畫持續時間，因為它檢查的是實際的焦點成功與否，而不是使用固定延遲。
用戶數據會被收集或傳輸嗎？
不。此僅文檔技能不包含任何存取、收集或傳輸用戶數據的代碼。
為什麼要檢查 document.activeElement 而不是 focus() 的返回值？
focus() 在不同瀏覽器中返回的 true/false 不一致。檢查 document.activeElement 可以可靠地確認焦點是否移動到目標元素。
這與其他 UI 庫相比如何？
此模式類似於 bits-ui 在 Svelte 中處理動畫存在的方式。重試機制是一種通用方法，適用於各種框架。