如何使第一个片段（突出显示）在reveal.js 中自动可见？

Question

在reveal.js中，是否可以使第一个片段自动可见？

我正在使用文本颜色突出显示功能，对最近可见的片段应用稍亮的颜色，以便将注意力集中在该片段上。当下一个片段可见时，文本将恢复为正常颜色。

如果我将第一行文本设置为非片段，它会立即显示，但采用常规文本颜色。如果我把它变成一个片段，我必须前进一次才能出现第一行（这是一个合理的后备，只是不是我的偏好）。不过，当它是片段时，突出显示颜色确实有效。

这是一些标记示例：

    <section>
      <h2>Highlight First Line Test</h2>
      <p class="fragment highlight-current">Want this line visible <i>and</i> colour highlighted on slide entry</p>
      <p class="fragment highlight-current">Appears 2nd with colour highlight</p>
    </section>

以及我用来连接到 Reveal.js 高亮功能的 CSS 覆盖：

    .reveal .slides section .fragment.highlight-current.current-fragment {
      color: #f00; 
    }

（我也看过自动幻灯片，但无法让它做我想要的事情）。

Answer 1

通过使用样式的修改，fade-out您可以将第一行作为一个片段，在开始时可见，并在不再是当前时使用不同的颜色。

<style>
    .reveal .slides section .fragment.fade-down {
        opacity: 1;
        visibility: visible;
    }
    .reveal .slides section .fragment.fade-down.visible,
    .reveal .slides section .fragment.visible:not(.current-fragment) {
        color: grey;
    }
    .reveal .slides section .fragment.fade-down,
    .reveal .slides section .fragment.current-fragment {
        color: #1b91ff;
    }
</style>

<section>
  <h2 class="fragment fade-down" data-fragment-index="0">Highlight First Line Test</h2>
  <p class="fragment" data-fragment-index="0">Want this line visible <i>and</i> colour highlighted on slide entry</p>
  <p class="fragment">Appears 2nd with colour highlight</p>
</section>

确保data-fragment-index="0"对第一个和第二个片段进行设置，以便在第一个片段淡出时显示第二个片段。