如何让一个片段同时淡入和高亮红色？

Question

这个：

The next sentence should be hidden at first. <span class="fragment highlight-red">But when it is revealed, it should be highlighted.</span>

一开始并没有隐藏。

这个更接近：

The next sentence should be hidden at first. <span class="fragment"><span class="highlight-red">But when it is revealed, it should be highlighted.</span></span>

一开始是隐藏的，但是当它显示出来时，它是黑色的，需要再次点击才能变成红色。

有更好的办法吗？

Answer 1

这可以通过定义一个自定义片段来相当简单地完成：

.fragment.red {
  color: red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/css/reveal.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/css/theme/simple.min.css" rel="stylesheet" />

<div class="reveal">
  <div class="slides">
    <section>
      The next sentence should be hidden at first.
      <span class="fragment custom red">
         But when it is revealed, it should be highlighted.
      </span>
    </section>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/js/reveal.min.js"></script>
<script>
  Reveal.initialize();
</script>