幻灯片过渡效果

元素动画解决页内动效，幻灯片过渡解决"翻页时整页如何切换"。Slidev 内置多种过渡效果，一行配置即可启用。

内置过渡

在 Frontmatter 中设置 transition：

---
transition: slide-left
---

全局生效，翻页时当前页与下一页以该效果切换。

常用内置过渡：

过渡名	效果
slide	整体滑动切换
slide-left	向左滑入
slide-right	向右滑入
fade	淡入淡出
fade-out	先淡出再淡入（有明显间隔）
slide-up	向上滑入
zoom	缩放切换
none	无过渡，直接切换

逐页指定过渡

在页级 Frontmatter 中覆盖，实现每页不同效果：

---
transition: slide-left
---

# 首页

---

---
transition: fade
---

# 第二章

---

---
transition: zoom
---

# 第三章

全局配置是默认值，页级配置只对本页生效。

前进与后退的区别

部分过渡区分方向：前进（下一页）与后退（上一页）可用不同效果：

---
transition: slide-left
backwardTransition: slide-right
---

• transition：前进（下一页）时的效果
• backwardTransition：后退（上一页）时的效果

这样翻页方向感更强：前进向左滑，后退向右滑，视觉反馈自然。

过渡与点击动画的关系

幻灯片过渡在整页切换时触发；页内的 v-click 动画在本页内触发。两者叠加：

---
transition: fade
---

# 标题

::v-click

本页内容分两次点击展开

::

翻页用 fade 平滑切换，页内用 v-click 分步讲解，节奏感由两层动画共同构成。

View Transition API

Slidev 支持现代浏览器的 View Transition API，提供更流畅的动画与共享元素过渡：

---
transition: view-transition
---

• 依赖浏览器对 View Transition API 的支持
• 可实现跨页共享元素（如标题从一页"飞"到另一页）的过渡
• 配合 transition-mode 使用（见「过渡高级特性」）

自定义过渡

内置过渡不满意时，在 <style> 中编写自定义过渡：

<style>
.slidev-transition-fade-in-out {
  transition: opacity 0.5s ease;
}
</style>

---
transition: fade-in-out
---

Slidev 会寻找 .slidev-transition-<名称> 的 CSS 类作为过渡实现，用标准 CSS 过渡或关键帧描述进入/离开状态。

过渡配置速查

配置	位置	作用
transition: slide-left	Frontmatter	全局前进过渡
backwardTransition: fade	Frontmatter	全局后退过渡
页级 transition	页 Frontmatter	单页覆盖
transition: view-transition	Frontmatter	启用 View Transition API
.slidev-transition-xxx	style 块	自定义过渡类

使用建议

场景	推荐过渡
章节切换	slide-left 或 fade
强调转折	fade-out（有明显停顿）
技术细节	none 或 fade（减少干扰）
演示节奏	slide 系列（方向感强）

过渡不是越多越好——技术演示通常用统一的轻量过渡（如 fade 或 slide-left）保持专业感，只在章节转折处换效果制造层次。