slidev-transitions

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Slide Transitions in Slidev

Slidev中的幻灯片过渡效果

This skill covers adding smooth transitions between slides in Slidev, including built-in transitions, custom animations, and directional transitions.

本技能介绍如何在Slidev中为幻灯片添加流畅的过渡效果，包括内置过渡、自定义动画以及方向型过渡。

When to Use This Skill

何时使用该技能

Adding polish to presentations
Creating smooth navigation experiences
Emphasizing slide changes
Matching presentation themes
Creating unique visual effects

为演示文稿增添精致感
打造流畅的导航体验
突出幻灯片切换
匹配演示文稿主题
创建独特的视觉效果

Setting Transitions

设置过渡效果

Global Transition (Frontmatter)

全局过渡（Frontmatter）

yaml

---
transition: slide-left
---

Applied to all slides in the presentation.

yaml

---
transition: slide-left
---

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

Per-Slide Transition

单张幻灯片过渡

markdown

---
transition: fade
---

markdown

---
transition: fade
---

This slide fades in

此幻灯片淡入显示

transition: slide-up

This slide slides up

此幻灯片向上滑入

undefined

undefined

Inline with Separator

与分隔符配合使用

markdown

undefined

markdown

undefined

Slide 1

幻灯片1

transition: zoom

Slide 2 (zooms in)

幻灯片2（缩放进入）

undefined

undefined

Built-in Transitions

内置过渡效果

Fade Transitions

淡入淡出过渡

Name	Effect
`fade`	Simple fade in/out
`fade-out`	Fade out, then appear

markdown

---
transition: fade
---

名称	效果
`fade`	简单淡入淡出
`fade-out`	先淡出，再显示新内容

markdown

---
transition: fade
---

Slide Transitions

滑动过渡

Name	Effect
`slide-left`	New slide enters from right
`slide-right`	New slide enters from left
`slide-up`	New slide enters from bottom
`slide-down`	New slide enters from top

markdown

---
transition: slide-left
---

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

markdown

---
transition: slide-left
---

View Transition

视图过渡

Uses the modern View Transitions API:

markdown

---
transition: view-transition
---

Note: Requires browser support for View Transitions API.

使用现代的View Transitions API：

markdown

---
transition: view-transition
---

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

Directional Transitions

方向型过渡

Forward/Backward Different

前进/后退使用不同过渡

Use

to separate forward and backward transitions:

markdown

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

Going forward: slides left
Going backward: slides right

使用

分隔前进和后退时的过渡效果：

markdown

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

前进时：向左滑动
后退时：向右滑动

Common Patterns

常见模式

markdown

undefined

markdown

undefined

Natural slide direction

自然滑动方向

transition: slide-left | slide-right

Vertical navigation

垂直导航

transition: slide-up | slide-down

Fade forward, slide back

前进淡入，后退滑动

transition: fade | slide-right

undefined

transition: fade | slide-right

undefined

Custom Transitions

自定义过渡效果

CSS-based Custom Transition

基于CSS的自定义过渡

Create

styles/index.css

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);
}

Use in frontmatter:

yaml

---
transition: my-transition
---

创建

styles/index.css

：

css

/* 定义自定义过渡 */
.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中使用：

yaml

---
transition: my-transition
---

Transition Classes

过渡类

Slidev uses Vue transition classes:

Class	When Applied
`[name]-enter-from`	Starting state for enter
`[name]-enter-active`	During enter transition
`[name]-enter-to`	Ending state for enter
`[name]-leave-from`	Starting state for leave
`[name]-leave-active`	During leave transition
`[name]-leave-to`	Ending state for leave

Slidev使用Vue的过渡类：

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

Transition Examples

过渡效果示例

Scale Transition

缩放过渡

css

.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);
}

css

.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 Transition

翻转过渡

css

.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);
}

css

.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 Transition

模糊过渡

css

.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);
}

css

.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 Transition

弹跳过渡

css

.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);
  }
}

css

.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 Transition

滑动过渡（Swipe）

css

.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%);
}

css

.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

Basic Usage

基础用法

yaml

---
transition: view-transition
---

yaml

---
transition: view-transition
---

Named View Transitions

命名视图过渡

markdown

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

Elements with the same

view-transition-name

on consecutive slides will animate between their positions.

markdown

<div style="view-transition-name: hero">
  平滑过渡的内容
</div>

连续幻灯片中具有相同

view-transition-name

的元素会在它们的位置之间产生动画效果。

Practical Example

实际示例

markdown

---
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>

markdown

---
transition: view-transition
---

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

---
transition: view-transition
---

<div style="view-transition-name: card" class="w-64 h-64 bg-blue-500">
  卡片变大了！
</div>

Transition Timing

过渡时序

Duration

时长

css

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

css

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

Easing Functions

缓动函数

css

/* 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); }

css

/* 常见缓动函数 */
.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; }

/* 自定义贝塞尔曲线缓动 */
.custom { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }

Delay

延迟

css

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

css

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

Transition Per Slide Type

按幻灯片类型设置过渡

Different Transitions for Different Content

不同内容使用不同过渡

markdown

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

markdown

---
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

谢谢观看

undefined

undefined

Disabling Transitions

禁用过渡效果

No Transition

无过渡

yaml

---
transition: none
---

yaml

---
transition: none
---

Disable Globally

全局禁用

yaml

---
transition: false
---

yaml

---
transition: false
---

Best Practices

最佳实践

1. Consistency

1. 一致性

Use the same transition family throughout:

markdown

undefined

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

markdown

undefined

Good: Consistent slide family

推荐：一致的滑动类过渡

transition: slide-left | slide-right

undefined

transition: slide-left | slide-right

undefined

2. Match Content Type

2. 匹配内容类型

Content	Suggested Transition
Cover/Title	`fade`
Regular content	`slide-left`
Section break	`fade` or `zoom`
Demo/Code	`fade`
Conclusion	`fade`

内容	推荐过渡效果
封面/标题	`fade`
常规内容	`slide-left`
章节分隔页	`fade` 或 `zoom`
演示/代码	`fade`
结论	`fade`

3. Keep It Subtle

3. 保持简洁

❌ Too flashy

css

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

✓ Professional

css

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

❌ 过于花哨

css

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

✓ 专业风格

css

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

4. Consider Audience

4. 考虑受众

Technical presentations: Minimal transitions
Creative presentations: More freedom
Long presentations: Less distracting

技术类演示：过渡效果尽量简洁
创意类演示：可以更自由地设计
长篇演示：避免过渡效果过于分散注意力

5. Test Performance

5. 测试性能

Complex transitions may lag on:

Large presentations
Older devices
When exporting to PDF

复杂的过渡效果可能在以下场景出现卡顿：

大型演示文稿
老旧设备
导出为PDF时

Transition Presets

过渡预设

Professional Set

专业风格套装

css

/* 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);
}

css

/* styles/transitions.css */

/* 柔和淡入淡出 */
.pro-fade-enter-active,
.pro-fade-leave-active {
  transition: opacity 0.3s ease;
}
.pro-fade-enter-from,
.pro-fade-leave-to {
  opacity: 0;
}

/* 流畅滑动 */
.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);
}

Playful Set

活泼风格套装

css

/* 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; }
}

css

/* 活力弹跳 */
.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; }
}

Output Format

配置格式

When configuring transitions:

yaml

---

配置过渡效果时：

yaml

---

GLOBAL TRANSITION (first slide)

全局过渡（第一张幻灯片）

transition: [transition-name] | [backward-transition]

transition: [过渡名称] | [后退过渡名称]

Slide content...

幻灯片内容...

PER-SLIDE OVERRIDE (if needed)

单张幻灯片覆盖设置（如有需要）

transition: [different-transition]

transition: [不同的过渡效果]

Different slide content...

不同的幻灯片内容...


**TRANSITION PLAN:**
1. Cover slide: [transition]
2. Content slides: [transition]
3. Section breaks: [transition]
4. Conclusion: [transition]

**CUSTOM CSS (if needed):**
```css
.[name]-enter-active { ... }
.[name]-leave-to { ... }


**过渡方案规划：**
1. 封面幻灯片：[过渡效果]
2. 内容幻灯片：[过渡效果]
3. 章节分隔页：[过渡效果]
4. 结论页：[过渡效果]

**自定义CSS（如有需要）：**
```css
.[名称]-enter-active { ... }
.[名称]-leave-to { ... }