Javascript 如何在特定片段上指定eventListener？

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

我想触发一个事件，在页面上的第一个片段中添加一个类（'invi'），只有在显示第三个片段时才触发。我迷路了。请参见下面的代码示例：

<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>

---

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

因此，最好的解决方案根本不涉及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>

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

---

我将#bp32定位在#bp30的顶部，具有负的利润上限值。因此，在第三步，bp30将在bp32进入的同时淡出

文档没有表明它可以侦听特定元素。似乎是由您来检查被触发的片段的元素是否是您想要修改的元素

Reveal.addEventListener( 'fragmentshown', function( event ) { 
    if(event.fragment.id === 'bp30') { 
        event.fragment.classList.add("invis");
    }
} );
Reveal.addEventListener( 'fragmenthidden', function( event ) {
    if(event.fragment.id === 'bp30') { 
        event.fragment.classList.remove("invis");
    }
} );

Reveal.addEventListener( 'fragmentshown', function( event ) { 
    if(event.fragment.id === 'bp30') { 
        event.fragment.classList.add("invis");
    }
} );
Reveal.addEventListener( 'fragmenthidden', function( event ) {
    if(event.fragment.id === 'bp30') { 
        event.fragment.classList.remove("invis");
    }
} );