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

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

How can I make the first fragment (highlighted) automatically visible in reveal.js?

javascript

css

reveal.js