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>

CSS覆盖我曾经用来挂钩reveal.js高亮函数：

    .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中自动显示第一个片段（突出显示）？

1 个答案: