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

Question

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

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

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

这是一些示例标记：

    <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"，以便在第一个片段淡出时显示第二个片段。