如何让Reveal.js的fragment同时实现淡入与红色高亮效果？

你需要的是fragment元素初始隐藏，触发显示时同时完成淡入动画与红色高亮，之前的两种方案都没达到预期，原因和解决方法如下：

问题分析 #

• 方案一：直接用<span class="fragment highlight-red">，初始状态未隐藏。因为highlight-red仅负责高亮变色，没有设置初始隐藏的样式，所以元素一开始就显示在页面上。
• 方案二：嵌套两层<span class="fragment">，需要两次触发才能完成效果。Reveal.js会把每个独立的fragment视为一个触发步骤，第一次触发显示内层元素（此时还未激活高亮），第二次触发才会应用红色高亮。

可行解决方案 #

方法1：自定义复合效果的Fragment类 #

创建一个同时包含初始隐藏、淡入动画和红色高亮的自定义CSS类，只需要一个元素就能实现同步效果：

<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" />

<style>
/* 自定义fragment类：初始隐藏，显示时淡入+红色高亮 */
.fragment.highlight-red-fade {
  opacity: 0;
  transition: opacity 0.5s ease, color 0.5s ease;
}
.fragment.highlight-red-fade.visible {
  opacity: 1;
  color: #ff2c2d; /* 匹配Reveal.js默认highlight-red的红色值 */
}
</style>

<div class="reveal">
  <div class="slides">
    <section>
      The last sentence should be hidden at first. When it is revealed, it should be highlighted at the same time. 
      <span class="fragment highlight-red-fade">现在初始状态隐藏，触发时同步淡入并变红！</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>

方法2：修改现有highlight-red类的样式 #

如果不想新增类，直接修改highlight-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" />

<style>
/* 让highlight-red fragment初始隐藏，显示时同步淡入+变红 */
.fragment.highlight-red {
  opacity: 0;
  transition: opacity 0.5s ease, color 0.5s ease;
}
.fragment.highlight-red.visible {
  opacity: 1;
  color: #ff2c2d;
}
</style>

<div class="reveal">
  <div class="slides">
    <section>
      The last sentence should be hidden at first. When it is revealed, it should be highlighted at the same time. 
      <span class="fragment highlight-red">现在初始隐藏，触发时同步淡入变红！</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>

两种方法都能实现你要的效果：元素初始隐藏，单次触发后同时完成淡入动画和红色高亮。

内容的提问来源于stack exchange，提问作者Ooker