求助：在reveal.js中实现片段多步骤可见后淡出的方法

针对你需要的「元素淡入后连续多步可见，随后隐藏」的需求，直接用current-visible或fade-in-then-out无法满足，因为它们只能控制单步可见。可以通过**嵌套片段+指定不同data-fragment-index**的方式解决，具体实现如下：

核心实现代码 #

<div class="slide">
  <!-- Item 1：步骤2显示，步骤4隐藏 -->
  <span class="fragment fade-in" data-fragment-index="1">
    <span class="fragment fade-out" data-fragment-index="3">Item 1</span>
  </span>
  <!-- Item 2：步骤3显示，持续可见 -->
  <span class="fragment fade-in" data-fragment-index="2">Item 2</span>
</div>

逻辑说明 #

• 外层的fade-in片段（data-fragment-index="1"）控制Item1在步骤2（片段索引从0开始计数）淡入显示；
• 内层嵌套的fade-out片段（data-fragment-index="3"）控制Item1在步骤4淡出隐藏；
• Item2的fade-in片段（data-fragment-index="2"）控制其在步骤3淡入，之后保持可见。

这样就能完全匹配你的场景：

• 步骤1：空白幻灯片
• 步骤2：仅显示Item 1
• 步骤3：Item 1、Item 2同时可见
• 步骤4：仅显示Item 2

自定义过渡优化（可选） #

如果默认的淡入淡出效果不符合需求，可以添加自定义CSS调整：

/* 自定义淡入过渡 */
.fragment.fade-in {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
.fragment.fade-in.visible {
  opacity: 1;
}

/* 自定义淡出过渡，隐藏后不占用空间 */
.fragment.fade-out {
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
}
.fragment.fade-out.visible {
  opacity: 0;
  visibility: hidden;
}

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