如何在Reveal.js幻灯片中复用区域并原地替换片段？

需求说明 #

进入幻灯片时先显示标题和介绍文本：

<TITLE>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

多次点击后，依次显示Foo及其内容（每行逐个出现）：

<TITLE>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Foo
 • apple
 • banana
 • cake 

Foo内容展示完成后，Bar区域替换Foo区域显示：

<TITLE>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Bar
 • donut
 • eggs
 • fish

遇到的问题 #

• 无法实现Foo淡出后再显示Bar
• 幻灯片内容堆叠，Bar出现在Foo区域下方

原代码 #

<section>
  <h1>My title</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>

  <span class="fragment fade-out">
    <h3 class="fragment" data-fragment-index="0">Foo</h3>
    <ul>
      <span class="r-stack">
        <p class="fragment current-visible" data-fragment-index="1">• Apple 🍏</p>
        <p class="fragment current-visible" data-fragment-index="2">• Banana 🍌</p>
        <p class="fragment current-visible" data-fragment-index="3">• Cake 🍰</p>
      </span>
    </ul>
  </span>

  <span class="fragment fade-out">
    <h3 class="fragment" data-fragment-index="4">Bar</h3>
    <ul>
      <span class="r-stack">
        <p class="fragment current-visible" data-fragment-index="5">• Donut 🍩</p>
        <p class="fragment current-visible" data-fragment-index="6">• Eggs 🍳</p>
        <p class="fragment current-visible" data-fragment-index="7">• Fish 🐟</p>
      </span>
    </ul>
  </span>
</section>

解决方案 #

核心调整思路 #

1. 用r-stack包裹Foo和Bar容器，解决内容堆叠问题，让两者重叠在同一位置
2. 精准控制片段索引，实现Foo淡出与Bar淡入的时序同步

修改后的代码 #

<section>
  <h1>My title</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>

  <!-- 用r-stack实现Foo和Bar的重叠布局 -->
  <div class="r-stack">
    <!-- Foo区域：在第4个片段索引时淡出 -->
    <div class="fragment fade-out" data-fragment-index="4">
      <h3 class="fragment" data-fragment-index="0">Foo</h3>
      <ul>
        <p class="fragment" data-fragment-index="1">• Apple 🍏</p>
        <p class="fragment" data-fragment-index="2">• Banana 🍌</p>
        <p class="fragment" data-fragment-index="3">• Cake 🍰</p>
      </ul>
    </div>

    <!-- Bar区域：在第4个片段索引时淡入 -->
    <div class="fragment fade-in" data-fragment-index="4">
      <h3 class="fragment" data-fragment-index="4">Bar</h3>
      <ul>
        <p class="fragment" data-fragment-index="5">• Donut 🍩</p>
        <p class="fragment" data-fragment-index="6">• Eggs 🍳</p>
        <p class="fragment" data-fragment-index="7">• Fish 🐟</p>
      </ul>
    </div>
  </div>
</section>

关键调整说明 #

• 将原代码中的span改为div，符合块级元素语义，避免布局异常
• 外层r-stack类强制内部元素重叠显示，解决Bar在Foo下方堆叠的问题
• Foo的外层容器设置fade-out和data-fragment-index="4"，Bar的外层容器设置fade-in和相同索引，确保两者同步切换
• 移除Foo列表内的r-stack和current-visible，回归逐个显示列表项的需求逻辑

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