片段

片段用于在幻灯片上重点显示或逐渐显示各个元素。在移动到下一张幻灯片之前，将逐步处理具有 fragment 类的每个元素。

默认片段样式是开始无形并逐步显现。可以通过向片段追加不同的类来更改此样式。

<p class="fragment">Fade in</p>
<p class="fragment fade-out">Fade out</p>
<p class="fragment highlight-red">Highlight red</p>
<p class="fragment fade-in-then-out">Fade in, then out</p>
<p class="fragment fade-up">Slide up while fading in</p>

淡入

淡出

高亮红色

淡入，然后淡出

淡入时向上滑动

名称效果
fade-out开始可见，逐渐消失
fade-up淡入时向上滑动
fade-down淡入时向下滑动
fade-left淡入时向左滑动
fade-right淡入时向右滑动
fade-in-then-out淡入，然后在下一步中淡出
current-visible淡入，然后在下一步中淡出
fade-in-then-semi-out淡入，然后在下一步中变为 50%
增长向上扩展
半淡出淡化为 50%
收缩向下扩展
删除线删除线
高亮显示为红色将文本变为红色
高亮显示为绿色将文本变为绿色
高亮显示为蓝色将文本变为蓝色
当前高亮显示为红色将文本变为红色，然后在下一步中变回原色
当前高亮显示为绿色将文本变为绿色，然后在下一步中变回原色
当前高亮显示为蓝色将文本变为蓝色，然后在下一步中变回原色

自定义片段 4.5.0

可通过分别定义 .fragment.effectname 和 .fragment.effectname.visible 的 CSS 样式来实现自定义效果。在演示文稿中逐步操作时，visible 类将添加到每个片段中。

例如，以下定义了一个片段样式，其中元素最初模糊，但在逐步操作时会变清晰。

<style>
  .fragment.blur {
    filter: blur(5px);
  }
  .fragment.blur.visible {
    filter: none;
  }
</style>
<section>
  <p class="fragment custom blur">One</p>
  <p class="fragment custom blur">Two</p>
  <p class="fragment custom blur">Three</p>
</section>

一

二

三

请注意，我们正在为每个片段添加一个 custom 类。这会告知 reveal.js 避免应用其默认的淡入片段样式。

如果你想让除当前片段外的所有元素保持模糊状态，你可以将 visible 替换为 current-fragment。

.fragment.blur.current-fragment {
  filter: none;
}

嵌套片段

通过对其进行封装，可以将多个片段顺序应用到同一元素，这会在第一步中淡入文本，在第二步中将其变为红色，并在第三步中淡出。

<span class="fragment fade-in">
  <span class="fragment highlight-red">
    <span class="fragment fade-out"> Fade in > Turn red > Fade out </span>
  </span>
</span>
淡入 > 变为红色 > 淡出

片段顺序

默认情况下，片段将按其在 DOM 中出现的顺序逐步操作。可以使用 data-fragment-index 属性来更改此显示顺序。请注意，多个元素可以出现在同一索引中。

<p class="fragment" data-fragment-index="3">Appears last</p>
<p class="fragment" data-fragment-index="1">Appears first</p>
<p class="fragment" data-fragment-index="2">Appears second</p>

最后出现

首先出现

其次出现

事件

当某个片段显示或隐藏时，reveal.js 会派发事件。

Reveal.on('fragmentshown', (event) => {
  // event.fragment = the fragment DOM element
});
Reveal.on('fragmenthidden', (event) => {
  // event.fragment = the fragment DOM element
});