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

【问题标题】：Reveal.JS - How to specify eventListener on a specific fragment?Reveal.JS - 如何在特定片段上指定 eventListener？
【发布时间】：2014-10-14 01:51:06
【问题描述】：

我正在创建一个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”类添加到幻灯片上的第一个片段。是否可以在将类添加到第一个片段之前指定我们正在侦听要显示的第三个片段？

【问题讨论】：

标签： javascript html dom addeventlistener reveal.js

【解决方案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 的顶部，边距顶部为负值。所以，在第三步，#bp30 会在#bp32 滚入的同时淡出。

【讨论】：

【解决方案2】：

该文档并未表明它可以侦听特定元素。看来您要检查被触发的片段的元素是否是您要修改的元素。

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");
    }
} );

【讨论】：