slidev-transitions

Slidev 中的幻灯片过渡效果

本技能介绍如何在 Slidev 中为幻灯片添加平滑过渡效果，包括内置过渡效果、自定义动画和方向性过渡效果。

何时使用此技能

• 为演示文稿润色
• 创建流畅的导航体验
• 突出幻灯片切换
• 匹配演示文稿主题
• 创建独特的视觉效果

设置过渡效果

全局过渡效果（Frontmatter）

---
transition: slide-left
---

应用于演示文稿中的所有幻灯片。

单页过渡效果

---
transition: fade
---

# This slide fades in

---
transition: slide-up
---

# This slide slides up

与分隔符内联设置

# Slide 1

---
transition: zoom
---

# Slide 2 (zooms in)

内置过渡效果

淡入淡出过渡效果

名称	效果
fade	简单的淡入／淡出
fade-out	淡出后出现

---
transition: fade
---

滑动过渡效果

名称	效果
slide-left	新幻灯片从右侧进入
slide-right	新幻灯片从左侧进入
slide-up	新幻灯片从底部进入
slide-down	新幻灯片从顶部进入

---
transition: slide-left
---

视图过渡效果

使用现代 View Transitions API：

---
transition: view-transition
---

注意：需要浏览器支持 View Transitions API。

方向性过渡效果

前进／后退使用不同效果

使用 | 分隔前进和后退过渡效果：

---
transition: slide-left | slide-right
---

• 前进时：幻灯片向左滑动
• 后退时：幻灯片向右滑动

常见模式

# Natural slide direction
---
transition: slide-left | slide-right
---

# Vertical navigation
---
transition: slide-up | slide-down
---

# Fade forward, slide back
---
transition: fade | slide-right
---

自定义过渡效果

基于 CSS 的自定义过渡效果

创建 styles/index.css：

/* Define custom transition */
.my-transition-enter-active,
.my-transition-leave-active {
  transition: all 0.5s ease;
}

.my-transition-enter-from {
  opacity: 0;
  transform: translateX(100px) rotate(10deg);
}

.my-transition-leave-to {
  opacity: 0;
  transform: translateX(-100px) rotate(-10deg);
}

在 frontmatter 中使用：

---
transition: my-transition
---

过渡类

Slidev 使用 Vue 过渡类：

类	应用时机
[name]-enter-from	进入过渡的起始状态
[name]-enter-active	进入过渡期间
[name]-enter-to	进入过渡的结束状态
[name]-leave-from	离开过渡的起始状态
[name]-leave-active	离开过渡期间
[name]-leave-to	离开过渡的结束状态

过渡效果示例

缩放过渡效果

.scale-enter-active,
.scale-leave-active {
  transition: all 0.4s ease;
}

.scale-enter-from {
  opacity: 0;
  transform: scale(0.8);
}

.scale-leave-to {
  opacity: 0;
  transform: scale(1.2);
}

翻转过渡效果

.flip-enter-active,
.flip-leave-active {
  transition: all 0.6s ease;
  transform-style: preserve-3d;
}

.flip-enter-from {
  opacity: 0;
  transform: rotateY(-90deg);
}

.flip-leave-to {
  opacity: 0;
  transform: rotateY(90deg);
}

模糊过渡效果

.blur-enter-active,
.blur-leave-active {
  transition: all 0.5s ease;
}

.blur-enter-from {
  opacity: 0;
  filter: blur(20px);
}

.blur-leave-to {
  opacity: 0;
  filter: blur(20px);
}

弹跳过渡效果

.bounce-enter-active {
  animation: bounce-in 0.5s;
}

.bounce-leave-active {
  animation: bounce-out 0.5s;
}

@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounce-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}

滑入过渡效果

.swipe-enter-active,
.swipe-leave-active {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.swipe-enter-from {
  opacity: 0;
  transform: translateX(100%);
}

.swipe-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}

View Transitions API

基本用法

---
transition: view-transition
---

命名视图过渡效果

<div style="view-transition-name: hero">
  Content that transitions smoothly
</div>

连续幻灯片上具有相同 view-transition-name 的元素会在位置之间进行动画过渡。

实际示例

---
transition: view-transition
---

<div style="view-transition-name: card" class="w-32 h-32 bg-blue-500">
  Small card
</div>

---
transition: view-transition
---

<div style="view-transition-name: card" class="w-64 h-64 bg-blue-500">
  Card grows!
</div>

过渡效果时序

持续时间

.slow-fade-enter-active,
.slow-fade-leave-active {
  transition: all 1s ease; /* 1 second */
}

缓动函数

/* Common easing functions */
.ease-in { transition-timing-function: ease-in; }
.ease-out { transition-timing-function: ease-out; }
.ease-in-out { transition-timing-function: ease-in-out; }
.linear { transition-timing-function: linear; }

/* Cubic bezier for custom easing */
.custom { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }

延迟

.delayed-enter-active {
  transition: all 0.5s ease 0.2s; /* 0.2s delay */
}

按幻灯片类型设置过渡效果

不同内容使用不同过渡效果

---
layout: cover
transition: fade
---

# Title Slide

---
layout: default
transition: slide-left
---

# Content Slide

---
layout: section
transition: zoom
---

# Section Break

---
layout: end
transition: fade
---

# Thank You

禁用过渡效果

不使用过渡效果

---
transition: none
---

全局禁用

---
transition: false
---

最佳实践

1. 保持一致

在整个演示文稿中使用同一类过渡效果：

# Good: Consistent slide family
---
transition: slide-left | slide-right
---

2. 匹配内容类型

内容	建议的过渡效果
封面／标题	fade
常规内容	slide-left
章节分隔页	fade 或 zoom
演示／代码	fade
结尾页	fade

3. 保持低调

❌ 过于炫目

.crazy-enter-active {
  animation: spin 2s, bounce 1s, flash 0.5s;
}

✓ 专业

.subtle-enter-active {
  transition: opacity 0.3s ease;
}

4. 考虑受众

• 技术演示文稿：尽量少用过渡效果
• 创意演示文稿：可更自由地使用
• 长篇演示文稿：减少干扰性效果

5. 测试性能

复杂的过渡效果可能会在以下情况下出现卡顿：

• 大型演示文稿
• 较旧的设备
• 导出为 PDF 时

过渡效果预设

专业风格

/* styles/transitions.css */

/* Gentle fade */
.pro-fade-enter-active,
.pro-fade-leave-active {
  transition: opacity 0.3s ease;
}
.pro-fade-enter-from,
.pro-fade-leave-to {
  opacity: 0;
}

/* Smooth slide */
.pro-slide-enter-active,
.pro-slide-leave-active {
  transition: all 0.35s ease-out;
}
.pro-slide-enter-from {
  opacity: 0;
  transform: translateX(30px);
}
.pro-slide-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

活泼风格

/* Energetic bounce */
.playful-enter-active {
  animation: pop-in 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes pop-in {
  0% { transform: scale(0); opacity: 0; }
  80% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

输出格式

配置过渡效果时：

---
# GLOBAL TRANSITION (first slide)
transition: [transition-name] | [backward-transition]
---

# Slide content...

---
# PER-SLIDE OVERRIDE (if needed)
transition: [different-transition]
---

# Different slide content...

过渡效果方案：

1. 封面页：[过渡效果]
2. 内容页：[过渡效果]
3. 章节分隔页：[过渡效果]
4. 结尾页：[过渡效果]

自定义 CSS（如需要）：

.[name]-enter-active { ... }
.[name]-leave-to { ... }