Option to define fragment index shown immediately

[madduck]

I'd like to use the fade-in-then-semi-out transition on a bulleted list. Unfortunately, the slide comes up blank, and requires me to click to show the first item. I'd like the first item to be shown right away, but then semi-fade-out when the second item is shown.

At first, I thought setting data-fragment-index="0" would solve the issue, but it seems that this index only has a meaning with respect to the order of fragments.

What about adding a data-fragment-min-index key to the sections (defaulting to 0 or -1), which would result in fragments with an index less-than-or-equal to that number to be shown right away?

[wbuchanan]

@madduck I agree with you about having the capability to define that behavior a bit more precisely, but think the default should be the behavior you are looking for (e.g., avoiding having to advance the slides twice). Another nice option could be something like data-autoslide but applied to the fragment. The behavior could accept an array - or comma delimited - set of values to define the duration for the first transition and then the second transition (e.g., data-autoslide="0,-1" where -1 could turn off the autoslide behavior). I tried adding the data-autoslide attribute to fragment elements on a slide deck I am currently working on and it didn't do anything. When I added the same attribute to the enclosing <section> element it auto-advanced through all of the fragments.

In either case, being able to control that behavior a bit more precisely would be great.

I have found somewhat of a workaround:

    Reveal.on( 'slidetransitionend', event => {
        Reveal.nextFragment();
    });

The only challenge is that it takes a noticeably different amount of time between the first fragment appearing following a slide transition and the subsequent fragment transitions.

[gavin-kelly-1]

The way I've worked around this is to have the fragments as

<p class="fragment semi-fade-out" data-fragment-index="1" >Here at the start</p>
<p class="fragment fade-in-then-semi-out" data-fragment-index="1">I'll appear when previous fades out</p>
<p class="fragment fade-in-then-semi-out">Then me</p>
...
<p class="fragment">Finally me</p>

A bit verbose, but I think it implements the desired behaviour.

[kno10]

I think this should be added. I was also expecting an index of 0 to be immediately visible.

This may seem useless if you only think of bullet points, but consider the case where you want to have something disappear when switching to the "first" fragment (to make room for something else). I.e.,

<h1>Quiz</h1>
<div class="fragment current-visible" data-fragment-index="0">Correct?</div>
<div class="fragment" data-fragment-index="1">Maybe</div>

Without having "Correct?" first appear. I understand that this works with fade-out and assigning the same index for this particular use case.

[ssokolow]

The solution I came up with before finding this issue was to add this JavaScript...

Reveal.on('fragmentshown', (event) => {
  if (event.fragment.classList.contains("skipfwd")) {
    Reveal.next();
  }
});
Reveal.on('fragmenthidden', (event) => {
  if (event.fragment.classList.contains("skipback")) {
    Reveal.prev();
  }
});

...and then put fade-out skipfwd on my first slide and add skipback to the second one.

(Yeah, for anyone who hasn't tried to use them before, it appears fragmentshown and fragmenthidden should really be named fragmentstatenext and fragmentstateprevious and the documentation is just wrong.)

I think I'll stick with my solution since, even after seeing everyone else's solutions, I think this is the least likely to confuse future me or lead me to introduce lurking bugs later while revising my slide decks. (eg. slidetransitionend? That feels like it could have surprising effects somewhere else in the deck while fragment... events are explicitly only for fragments. A solution relying on having the same index on multiple fragments? The documentation doesn't say how API-stable that is and tying behaviours to bare numbers is easier for a developer to accidentally change without noticing.)