Reveal.JS - How to specify eventListener for a specific fragment?
I am creating an opens.js presentation. I want to trigger some changes in the dom when a specific fragment is shown. The documentation shows a generic eventListener that is executed when the first snippet is displayed on the page.
I want to trigger an event that adds a class ('invis') to the first fragment on the page only when the third fragment is displayed. Arrival is lost. See code examples below:
<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>
and script:
Reveal.addEventListener( 'fragmentshown', function( event ) {
document.getElementById('bp30').classList.add("invis");
} );
Reveal.addEventListener( 'fragmenthidden', function( event ) {
document.getElementById('bp30').classList.remove("invis");
} );
This adds the class "invis" to the first snippet on the slide when the first snippet is shown. Can we specify that we are listening to the third snippet to be shown before adding the class to the first snippet?
source to share
So addEventListener is not the best solution. I thought about how hard it was.
The correct answer in this case is to nest the fragment to be deleted or hidden in another fragment that disappears. We then use the chunk index data binding to specify the order in which we want those chunks to be animated.
You can run multiple snippets to / from animation in the same step with an index.
See updated code below:
<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>
As you can see, I am inserting the first snippet in the gap and setting it as the slice that will fade out. I am setting the chunk index for each chunk. The first stage of the fragment will roll-in # bp30, the second stage will include # bp31. Since I set the span index to 3 and the span index for # bp32 to 3. So they are executed in the same step.
I have # bp32 positioned on top of # bp30 with negative margin-top. So in the third step, # bp30 will disappear at the same time as # bp32.
source to share
The document does not indicate that it can listen to a specific element. It seems that you need to check the element of the fragment being triggered - the one you want to change.
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");
}
} );
source to share