javascript - 如何使第一个片段(突出显示)在 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; 
    }

(我也看过 autoslide，但不能让它做我想做的事)。

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