用途:为 Slidev 演示文稿添加幻灯片之间的平滑过渡,包括内置过渡、自定义动画和方向性过渡,用于提升演示质感、强调页面切换或匹配主题风格。
主要能力:内置 fade、fade-out、slide-left、slide-right、slide-up、slide-down 以及基于 View Transitions API 的 view-transition。支持在 frontmatter 中设置全局过渡(transition: slide-left)或单页过渡(transition: fade),也可用分隔符内联指定。方向性过渡用竖线分隔前进与后退,如 transition: slide-left | slide-right。自定义过渡通过 styles/index.css 定义,使用 Vue 过渡类([name]-enter-from、[name]-enter-active、[name]-enter-to、[name]-leave-from、[name]-leave-active、[name]-leave-to),可实现缩放、翻转、模糊、弹跳、滑动等效果,并可控制时长、缓动函数与延迟。View Transitions API 支持命名过渡,相同 view-transition-name 的元素在连续幻灯片间平滑移动。
使用方式:在幻灯片 frontmatter 中写 transition 字段;自定义过渡需在 styles/index.css 中定义对应 CSS 类,再在 frontmatter 引用类名。可用 transition: none 或 transition: false 禁用过渡。
适用场景:封面、正文、章节分隔、结尾等不同内容类型可搭配不同过渡;技术演示宜用简洁过渡,创意演示可更自由。
限制:view-transition 需要浏览器支持 View Transitions API;复杂过渡在大型演示、旧设备或导出 PDF 时可能卡顿。资料未提供安装命令、收费或平台信息。