工程開發
slidev-click-animations avatar

slidev-click-animations

精通 Slidev 中的 v-click、v-after 和 motion 指令,以實現漸進式內容揭露、互動式圖表及複雜的簡報動畫效果。

簡介

此技能旨在提供對 Slidev 簡報中動畫與互動性的全面控制。專為技術演講者與開發人員設計,使用者能透過動態、非靜態的簡報內容有效引導觀眾注意力。藉由基於 Vue 的指令,使用者無需離開 Markdown 環境,即可協調動畫時間軸、順序揭露內容並執行複雜的佈局轉換。

  • 完整支援 v-click、v-clicks、v-after 與 v-switch 指令,以實現分步內容呈現。

  • 整合 v-motion 指令,將 CSS 過渡、變換與基於關鍵影格的動畫應用於任何 DOM 元素。

  • 具備進階定位功能,支援明確索引或相對偏移語法,以精確控制動畫順序。

  • 支援基於範圍的顯隱切換與巢狀清單動畫功能。

  • 可透過 slidev-vclick-target、prior 與 current 狀態類別無縫整合 CSS,實現模糊、縮放或色彩轉換等視覺特效。

  • 能夠為程式碼區塊與圖表添加動畫,提升技術展示的可讀性與參與度。

  • 使用此技能可在單一投影片中逐步建構複雜的架構圖或邏輯流程。

  • 極適合技術教育或研討會簡報,特別是需要詳細說明程式碼演進或邏輯推導的場景。

  • 實作時,建議透過 front-matter 設定管理總點擊次數,避免佈局偏移或導航錯誤。

  • 結合 initial、enter 與 leave 等 motion 屬性,打造專業級的動態設計效果。

  • 請注意避免過度使用動畫以維持簡報的可讀性,過多的動態效果可能會分散核心技術內容的注意力。

  • 輸入依賴標準 Slidev Markdown 語法;執行前請確認專案環境已正確整合 @vueuse/motion。

倉庫統計

Star 數
29
Fork 數
1
Open Issue 數
0
主要語言
未提供
預設分支
main
同步狀態
閒置
最近同步時間
2026年5月3日 下午04:18
在 GitHub 查看