片段

片段系统概述

片段系统管理幻灯片中应逐步显示的元素的可见性和顺序。在导航演示文稿时，reveal.js 将首先遍历当前幻灯片上的所有片段，然后才会继续到下一张幻灯片。

来源： js/controllers/fragments.js8-15 js/reveal.js115

创建片段

要创建片段，请将 fragment 类添加到幻灯片中的任何元素。在导航演示文稿时，reveal.js 最初会隐藏这些元素，然后随着您的前进逐步显示它们。

基本片段示例

默认情况下，片段按文档顺序（它们在 HTML 中出现的顺序）显示。您可以使用 data-fragment-index 属性自定义显示顺序。

来源： js/controllers/fragments.js99-144

片段排序和排序

当片段具有 data-fragment-index 属性时，它们将根据这些值进行排序。没有显式索引的片段会自动分配索引，并保持其文档顺序。

排序过程如下：

具有 data-fragment-index 属性的片段按其索引值分组
没有索引的片段按文档顺序追加
分配连续索引以确保编号连续

此排序顺序决定了片段在导航期间显示的顺序。

来源： js/controllers/fragments.js99-144 js/controllers/fragments.js150-165

片段可见性状态

片段具有几种可能的可见性状态，通过 CSS 类管理

类	描述
`fragment`	所有片段的基础类（最初隐藏）
`visible`	显示片段时应用
`current-fragment`	应用于最后显示的片段
`disabled`	排除片段的导航

在片段之间导航时，系统会添加或删除这些类来控制可见性

来源： js/controllers/fragments.js177-281

片段系统提供了在当前幻灯片中的片段之间导航的方法

next()：显示下一个片段
prev()：隐藏最近显示的片段
goto(index, offset)：导航到特定片段索引

该系统还提供了 availableRoutes() 方法，该方法返回一个对象，指示是否可以进行前进和后退片段导航。

这由 Controls 控制器用于适当地启用或禁用导航按钮。

来源： js/controllers/fragments.js62-78 js/controllers/fragments.js309-373 js/controllers/controls.js143-166

片段事件

当片段可见性发生变化时，系统会触发以下事件

事件	描述
`fragmentshown`	当一个或多个片段可见时触发
`fragmenthidden`	当一个或多个片段被隐藏时触发

这些事件包含有关哪些片段状态发生变化的数据，这允许您挂钩片段导航以实现自定义行为。

来源： js/controllers/fragments.js260-278

片段动画样式

除了默认的淡入效果外，reveal.js 还提供了多种内置动画样式，可应用于片段

类	动画效果
`fade-out`	开始可见，然后淡出
`fade-up`	淡入并向上滑动
`fade-down`	淡入并向下滑动
`fade-left`	淡入并向左滑动
`fade-right`	淡入并向右滑动
`fade-in-then-out`	淡入，然后下一步淡出
`fade-in-then-semi-out`	淡入，然后部分淡出
`grow`	放大
`semi-fade-out`	部分淡出
`shrink`	缩小
`strike`	划掉文本
`highlight-red`	短暂地以红色高亮
`highlight-green`	短暂地以绿色高亮
`highlight-blue`	短暂地以蓝色高亮

使用示例

片段系统架构

下图显示了 Fragments 控制器如何融入 reveal.js 架构及其内部组件

来源： js/reveal.js115 js/controllers/fragments.js8-375 js/controllers/controls.js17-287

片段配置

可以使用 fragments 配置选项在全局启用或禁用片段系统

当禁用片段时，所有片段元素都会立即可见（就像它们具有 visible 类一样）。

此外，还有一个配置选项可以将片段状态包含在 URL 哈希中

这允许您直接链接到幻灯片中的特定片段。

来源： js/controllers/fragments.js19-53 js/controllers/fragments.js337-339

实际用法示例

项目符号显示

片段最常见的用途之一是逐个显示项目符号

顺序高亮

您可以使用片段来突出显示图像或代码的不同部分

增量图

逐步构建复杂的图表

内部实现细节

Fragments 控制器维护当前幻灯片上所有片段的状态。在片段之间导航时，它会

根据索引对片段进行排序
根据当前索引确定应显示哪些片段
更新 CSS 类以显示/隐藏片段
触发片段可见性更改事件
使用当前片段索引更新幻灯片的 data-fragment 属性

片段系统与核心导航系统紧密集成，可实现幻灯片和片段之间的无缝过渡。

来源： js/controllers/fragments.js177-281 js/reveal.js1231-1244

片段