Reveal.js: Replace text on fragment transition

[chrisspiegl]

Is there an easy way to replace the content of an <p> or <span> tag with new text?

The problem currently is that if I do the following, the content is next to each other and it is not replacing but rather just hiding the old content:

<span class="fragment fade-out" data-fragment-index="0">1</span>
<span class="fragment fade-in" data-fragment-index="0">x</span>

Would be a nice feature to have.

[hakimel]

You'll need to wrap both elements in a single container which has position: relative. Then use position: absolute on the second fragment and position it on top of the other.

This isn't included in the framework since, compared to all other fragments, it requires an additional DOM element.

[btel]

How do I make sure that the two elements are aligned? If I don't set left/top on my images very precisely, they are slightly offset.

[ghost]

This doesn't work well if you have a title. Since i wont know the height of your data, the title will sit in the vertical center and push your content down too much. Wish there was a way to support replacing fragments.

[lilaL]

Hey,
this worked out fine, but still they are offsets!

<div style="position:relative" >
        <p class="fragment fade-in" style="position:absolute; margin-left: auto; margin-right: auto; left: 0; right: 0;" data-fragment-index="0">
        TWO
        </p>
        <p class="fragment fade-out" style="position:absolute; margin-left: auto; margin-right: auto; left: 0; right: 0;" data-fragment-index="0">
          ONE
        </p>
    </div>

[okyear]

Hi,
There is another way I find more elegant :

Add this style in your css :

.reveal .slides section .fragment.step-fade-in-then-out {
    opacity: 0;
    display: none; }
.reveal .slides section .fragment.step-fade-in-then-out.current-fragment {
    opacity: 1;
    display: inline; }

Then, you can define your steps this way :

<section>
    <section>
        <p class="fragment step-fade-in-then-out">One</p>
        <p class="fragment step-fade-in-then-out">Two</p>
        <p class="fragment step-fade-in-then-out">Three</p>
        <p class="fragment step-fade-in-then-out">Four</p>
    </section>
</section>

[RogerCreasy]

@okyear Thanks for your answer/comment. Your solution worked great for me. I used it in markdown - set the class by putting <!-- .element: class="fragment step-fade-in-then-out" --> after a bullet point

You should consider doing a PR. This would be a great addition.

[deisi]

Is there also a way of using @okyear solution for images? Currently it would place the top of the image in the middle of the slice, thus leaving the upper half empty and clipping the lower half of the image.

[zenzike]

The trouble with step-fade-in-then-out is that it seems to mess with the vertical alignment of the slide, which only gets fixed on a refresh. The problem goes away if display: inline is set in both transitions.

[hakimel]

I'm adding a few new layout helper classes to reveal.js 4.1. The 'stack' helper can be used to stack elements on top of each other and can be used to replacing text, or any other type of content. It automatically centers the stacked elements on top of each other. To recreate the above example with a stack, you'd use:

<div class="r-stack">
    <p class="fragment fade-in-then-out">One</p>
    <p class="fragment fade-in-then-out">Two</p>
    <p class="fragment fade-in-then-out">Three</p>
    <p class="fragment fade-in-then-out">Four</p>
</div>

You can see some examples with replacing images here:
https://lab.hakim.se/reveal-js-dev/examples/layout-helpers.html#/stack