reveal.js 默认的 fragment 动画仅控制 opacity，而 highlight-red 等内置高亮类也会覆盖 opacity，导致二者冲突；本文介绍通过自定义 css 类 + custom fragment 方式，让文本在首次出现时同时完成淡入和红色高亮。
reveal.js 默认的 fragment 动画仅控制 opacity，而 highlight-red 等内置高亮类也会覆盖 opacity，导致二者冲突；本文介绍通过自定义 css 类 + custom fragment 方式，让文本在首次出现时同时完成淡入和红色高亮。
在 Reveal.js 中，若希望某段文字初始隐藏、单次点击即同时实现淡入（fade-in）与红色高亮（highlight-red），直接组合 .fragment 和 .highlight-red 类是无效的——因为两者均依赖 opacity 属性动画，存在样式覆盖冲突；而嵌套 fragment（如 ...）则会强制分两步触发（先显示、再变红），违背“同步生效”的需求。
✅ 正确解法是：避免复用内置高亮类，改用自定义 fragment 样式，将颜色变更与淡入动画解耦。Reveal.js 自 4.5.0 起支持 custom fragment 类型，允许开发者完全控制进入时的样式状态。
只需添加以下 CSS（建议置于 中或独立样式表内）：
/* 自定义 fragment：淡入 + 红色字体 */
.fragment.custom.red {
opacity: 0;
color: transparent; /* 避免文字闪烁，配合 transition */
transition: opacity 0.3s ease, color 0.3s ease;
}
.fragment.custom.red.visible {
opacity: 1;
color: #d32f2f; /* Material Red 600，可按需调整 */
}
然后在 HTML 中使用该自定义类：
<section> The last sentence should be hidden at first. When it is revealed, it should be highlighted at the same time. <span class="fragment custom red">But as you can see, it now fades in AND turns red — in one step.</span> </section>
⚠️ 注意事项：
-
custom是 Reveal.js 的保留关键字，必须与fragment同时使用才能被识别为 fragment； -
.visible类由 Reveal.js 在 fragment 激活时自动添加，无需手动控制； - 若需兼容旧版 Reveal.js（data-fragment-index 配合 JS 监听
fragmentshown事件动态添加类，但推荐升级至稳定新版； - 如需其他高亮色（如 yellow、blue），可复用相同模式，例如
.fragment.custom.yellow { color: #ff8f00; }。
此方案语义清晰、无副作用，完美满足「一次触发、双重视觉效果」的演示需求，是 Reveal.js 高级 fragment 控制的最佳实践之一。
