底部的解决方案。但首先，让我解释一下。
要制作第一部分，请执行以下操作：

Foo
 • apple
 • banana
 • cake

如果一次只出现一行，则必须删除r-stack。r-stack是把东西放在彼此之上。
对于要替换先前内容的“栏”部分，它必须位于单独的幻灯片上-它必须位于单独的<section>中。（也许还有其他方法，我不确定。
代码中的一个问题是使用current-visible。这是Reveal.JS为自己的目的使用的类，最好不要碰它。
最后一点需要注意的是，有一个列表（<ul>），但没有使用列表项（<li>）。但这不会引起任何问题。
总的来说，下面的工作和简单得多。

<section data-transition="fade-out">
    <h3>Foo</h3>
    <ul>
        <li class="fragment">Apple 🍏</li>
        <li class="fragment">Banana 🍌</li>
        <li class="fragment">Cake 🍰</li>
    </ul>
</section>
<section data-transition="fade-in">
    <h3>Bar</h3>
    <ul>
        <li class="fragment">Donut 🍩</li>
        <li class="fragment">Eggs 🍳</li>
        <li class="fragment">Fish 🐟</li>
    </ul>
</section>

经过多次测试，我找到了一个解决方案。

备注

• 每个StackOverflow How to overlay one div over another div I堆栈元素，以获取Reveal.js r-stack，从而重用幻灯片的该部分。
• 我为左对齐的内容添加了CSS样式。
• 自定义项目符号和标题（<h1>）-除了默认的Reveal.js样式可能很困难/有问题。为了简单起见，我倾向于硬编码UTF-8项目符号，并使用CSS来完成自定义标题文本（大小;重量;... - 例如“fsh 4”，即“font style h4”，如下）。
• 我是Reveal.js新手;在我的用例中，我看不到一种方法，可以让“Foo”片段淡入，然后在不需要时淡出。我笨拙的解决方案是为每个子内容行（“项目符号”）重复这些标题，通过CSS将后者向下推。
• 动画GIF说明了附加的最终解决方案（抱歉-不知道Reveal.js的JSFiddle类Playground）。
  超文本标记语言

<section>
  <h3>Some foods</h3>

  <!-- https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div -->
  <div id="container">
    <div class="position_left">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

      <div id="subcontainer_1">
        <span class="r-stack">
          <p class="fragment current-visible" data-fragment-index="0"><span id=fsh4>Foo</span></p>
          <p class="fragment current-visible" data-fragment-index="1"><span id=fsh4>Foo</span></p>
          <p class="fragment current-visible" data-fragment-index="2"><span id=fsh4>Foo</span></p>
          <p id="nup3ooth" class="fragment current-visible" data-fragment-index="1">• Apple 🍏</p>
          <p id="nup3ooth" class="fragment current-visible" data-fragment-index="2">• Banana 🍌</p>
        </span>
      </div>

      <div id="subcontainer_2">
        <span class="r-stack">
          <p class="fragment current-visible" data-fragment-index="3"><span id=fsh4>Bar</span></p>
          <p class="fragment current-visible" data-fragment-index="4"><span id=fsh4>Bar</span></p>
          <p class="fragment current-visible" data-fragment-index="5"><span id=fsh4>Bar</span></p>
          <p id="nup3ooth" class="fragment current-visible" data-fragment-index="4">• Cake 🍰</p>
          <p id="nup3ooth" class="fragment current-visible" data-fragment-index="5">• Donut 🍩</p>
        </span>
      </div>

    </div>
  </div>
</section>

CSS

<style>
  /* ---------------------------------------- */
  /* POSITION LEFT                            */
  /* https://github.com/hakimel/reveal.js/issues/1897 */

  .reveal .position_left {
    text-align: left;
  }

  .reveal .position_left p {
    margin: 1.0rem 1.0rem 1.0rem 0.5rem;
    font-size: 1.0rem;
  }
  /* ---------------------------------------- */

  /* ---------------------------------------- */
  /* CONTAINER DIV                            */
  /* https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div */
  #container {
    position: relative;
  }

  #subcontainer_1 {
    width: 100%;
    position: absolute;
  }

  #subcontainer_2 {
    width: 100%;
    position: absolute;
  }
  /* ---------------------------------------- */

  /* ---------------------------------------- */
  /* FONT STYLES                              */

  /* Push the "bullets" down" (order top right bottom left): */
  #nup3ooth {
    padding: 2.0rem 0.0rem 0.0rem 1.0rem;
  }

  /* Note: no space following "span": */
  span#fsh4 {
    font-size: 1.25rem;
    margin: 0.0rem 0.0rem 0.0rem 0.0rem;
  }
  /* ---------------------------------------- */
</style>

截屏（GIF动画）