过渡高级特性

基础过渡覆盖多数场景。需要更精细的控制——前进后退不同效果、View Transition 模式、完全自定义动画——用本章的进阶配置。

前进与后退过渡

前进与后退分别配置，形成方向一致的手感：

---
transition: slide-left      # 前进：向左滑
backwardTransition: slide-right   # 后退：向右滑
---

支持的值：

配置	效果
transition	前进（下一页）时的过渡
backwardTransition	后退（上一页）时的过渡

未配置 backwardTransition 时，后退使用 transition 的默认镜像方向（如 slide-left 后退为 slide-right）。

逐页覆盖后退过渡：

---
transition: fade
backwardTransition: none
---

# 本页前进淡入、后退无过渡

过渡模式 transition-mode

transition-mode 控制过渡时新旧页面的组合方式：

---
transition: view-transition
transition-mode: view-transition
---

常用模式：

模式	行为
out-in（默认）	旧页先退出，新页再进入
in-out	新页先进入，旧页再退出
view-transition	使用 View Transition API 的共享过渡

view-transition 模式下可以结合 CSS 定义共享元素动画，实现标题、图片等元素跨页"延续"的高级效果：

<style>
::view-transition-group(title) {
  animation: none;
}
</style>

CSS 自定义过渡编写

Slidev 通过约定类名 .slidev-transition-<名称> 识别自定义过渡。以 fade 的实现为例：

<style>
.slidev-transition-fade {
  transition: opacity 0.3s ease;
  opacity: 1;
}
.slidev-transition-fade-leave {
  opacity: 0;
}
.slidev-transition-fade-enter {
  opacity: 0;
}
</style>

---
transition: fade
---

约定：

类名	作用
.slidev-transition-<名称>	过渡的基类（基础样式）
.slidev-transition-<名称>-enter	新页进入的初始状态
.slidev-transition-<名称>-leave	旧页离开的结束状态

自定义缩放过渡示例

<style>
.slidev-transition-zoom-in {
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.slidev-transition-zoom-in-enter {
  transform: scale(0.9);
  opacity: 0;
}
.slidev-transition-zoom-in-leave {
  transform: scale(1.05);
  opacity: 0;
}
</style>

---
transition: zoom-in
---

前进时新页从 90% 缩放淡入，旧页放大淡出，形成"镜头推进"的效果。

组合配置示例

技术演示统一节奏

---
transition: fade
backwardTransition: none
transition-mode: out-in
---

章节分隔页强调

---
transition: fade-out
backwardTransition: slide-left
---

# 进入下一章节

高级配置速查

配置	作用
backwardTransition	后退专用过渡
transition-mode: out-in	先出后进（默认）
transition-mode: in-out	先进后出
transition-mode: view-transition	View Transition 共享过渡
.slidev-transition-xxx	自定义过渡基类
.slidev-transition-xxx-enter	新页进入初始态
.slidev-transition-xxx-leave	旧页离开结束态
::view-transition-group()	共享元素过渡样式

调试建议

问题	排查
过渡不生效	检查类名拼写与 .slidev-transition- 前缀
方向反了	确认 backwardTransition 是否覆盖了预期方向
动画闪烁	检查 out-in 与 in-out 模式的选择
共享元素不工作	确认浏览器支持 View Transition API

掌握自定义过渡后，幻灯片切换效果可以完全按演示气质定制：轻量淡入、方向滑移、镜头缩放或 View Transition 的跨页延续，都能用几行 CSS 实现。