片段

¥Fragments

片段用于高亮或逐步显示幻灯片上的各个元素。每个带有 fragment 类的元素在移动到下一张幻灯片之前都会被逐一遍历。

¥Fragments are used to highlight or incrementally reveal individual elements on a slide. Every element with the class fragment will be stepped through before moving on to the next slide.

默认的片段样式为开始不可见，然后淡入。可以通过为片段添加不同的类来更改此样式。

¥The default fragment style is to start out invisible and fade in. This style can be changed by appending a different class to the 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>

自定义片段 4.5.0

¥Custom Fragments 4.5.0

可以通过分别为 .fragment.effectname 和 .fragment.effectname.visible 定义 CSS 样式来实现自定义效果。visible 类会在演示文稿中逐个播放时添加到每个片段。

¥Custom effects can be implemented by defining CSS styles for .fragment.effectname and .fragment.effectname.visible respectively. The visible class is added to each fragment as they are stepped through in the presentation.

例如，以下定义了一个片段样式，其中元素最初是模糊的，但在逐行浏览时会变为焦点。

¥For example, the following defines a fragment style where elements are initially blurred but become focused when stepped through.

<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 避免应用其默认的淡入片段样式。

¥Note that we are adding a custom class to each fragment. This tells reveal.js to avoid applying its default fade-in fragment styles.

如果你希望除当前片段外的所有元素都保持模糊，可以用 visible 替换 current-fragment。

¥If you want all elements to remain blurred except the current fragment, you can substitute visible for current-fragment.

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

嵌套片段

¥Nested Fragments

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

¥Multiple fragments can be applied to the same element sequentially by wrapping it, this will fade in the text on the first step, turn it red on the second and fade out on the third.

<span class="fragment fade-in">
  <span class="fragment highlight-red">
    <span class="fragment fade-out"> Fade in > Turn red > Fade out </span>
  </span>
</span>

片段顺序

¥Fragment Order

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

¥By default fragments will be stepped through in the order that they appear in the DOM. This display order can be changed using the data-fragment-index attribute. Note that multiple elements can appear at the same 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>

活动

¥Events

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

¥When a fragment is either shown or hidden reveal.js will dispatch an event.

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