javascript - Reveal.JS - 如何在特定片段上指定 eventListener？

Question

我正在创建一个 reveal.js 演示文稿。我希望在显示特定片段时触发对 dom 的一些更改。 documentation显示一个通用的 eventListener，它在显示页面上的第一个片段时执行。

我想触发一个事件，仅在显示第三个片段时将类('invis')添加到页面上的第一个片段。迷路了。请参阅下面的代码示例:

<section data-transition="fade" data-background="images/assets/Slide15/Slide15-bg.png">
  <div class="f-left fragment roll-in" id="bp30"></div>
  <div class="f-left fragment roll-in" id="bp31"></div>
  <div class="f-left fragment roll-in" id="bp32"></div>
  <aside></aside>
</section>

和脚本:

Reveal.addEventListener( 'fragmentshown', function( event ) { 
 document.getElementById('bp30').classList.add("invis");
} );
Reveal.addEventListener( 'fragmenthidden', function( event ) {
 document.getElementById('bp30').classList.remove("invis");
} );

这会在显示第一个片段时将“invis”类添加到幻灯片上的第一个片段。在将类添加到第一个片段之前，是否可以指定我们正在监听要显示的第三个片段？

Answer 1

所以最好的解决方案根本不涉及 addEventListener。我在想办法。

这种情况下的正确答案是将需要移除或隐藏的片段嵌套到另一个淡出的片段中。然后我们使用片段索引数据附件来指定我们希望这些片段动画的顺序。

您可以触发多个片段以在与索引相同的步骤中进行动画输入/输出。

请参阅下面更新的代码:

<section data-transition="fade" data-background="images/assets/Slide15/Slide15-bg.png">
 <span class="fragment fade-out" data-fragment-index="3">
  <div class="f-left fragment roll-in" data-fragment-index="1" id="bp30"></div>
 </span>
  <div class="f-left fragment roll-in" data-fragment-index="2" id="bp31"></div>
  <div class="f-left fragment roll-in" data-fragment-index="3" id="bp32"></div>
  <aside></aside>
</section>

如您所见，我将第一个片段嵌套到一个 span 中，并将其设置为一个将以淡入淡出动画的片段。我为每个片段设置了片段索引。第一个片段步骤将转入#bp30，第二个片段步骤将转入#bp31。因为我已将 span 片段的索引设置为 3，#bp32 的 span 索引也设置为 3。这样，它们将在同一步骤执行。

我将#bp32 定位在#bp30 之上，margin-top 值为负。因此，在第三步，#bp30 将在#bp32 出现的同时淡出。