Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace text on fragment transition #745

Closed
chrisspiegl opened this issue Dec 7, 2013 · 12 comments
Closed

Replace text on fragment transition #745

chrisspiegl opened this issue Dec 7, 2013 · 12 comments

Comments

@chrisspiegl
Copy link

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
Copy link
Owner

hakimel commented Dec 7, 2013

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.

@hakimel hakimel closed this as completed Dec 7, 2013
@btel
Copy link

btel commented Jul 11, 2014

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

ghost commented Apr 10, 2015

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

lilaL commented Jul 20, 2015

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

okyear commented Sep 18, 2018

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

RogerCreasy commented Sep 19, 2018

@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
Copy link

deisi commented Jan 17, 2019

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

zenzike commented Sep 10, 2020

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
Copy link
Owner

hakimel commented Sep 11, 2020

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

@Kabouik
Copy link

Kabouik commented Feb 5, 2021

That's a great feature that I have been longing for since I started using reveal.js, thanks a lot! So far I was using dirty hacks (like duplcating slides) to mimic this, but this was always with significant downsides.

Can anyone clarify how this could be used for rows in a table, if I want to replace characters in a table by others in a transition? The following doesn't seem to work, it duplicates rows:

<div class="r-stack">
        <tr class="fragment">
    		<td>a</td>
    		<td>a</td>
    		<td>a</td>
    		<td>a</td>
    		<td>a</td>
    		<td>a</td>
    	</tr>
        <tr class="fragment">
    		<td>b</td>
    		<td>b</td>
    		<td>b</td>
    		<td>b</td>
    		<td>b</td>
    		<td>b</td>
    	</tr>
</div>

Do I have to stack whole tables? This will make my code super long because the table is big and I need several stacks in it.

@Sciss
Copy link

Sciss commented Mar 13, 2021

Hi there. I don't understand how to make this work with embedded markdown:

<section data-markdown>
  <textarea data-template>
    ### headline

<div class="r-stack">
<p class="fragment fade-in-then-out">
part __one__ of *the* quote
</p>
<p class="fragment fade-in-then-out">
part __two__ of *the* quote
</p>
</div>

  </textarea>
</section>

This doesn't interpret the two fragments as markdown.

@chiphogg
Copy link

@Sciss In order to use markdown snippets inside of an HTML tag, you need to surround it with a blank line before and after.

If you do this, it will break the <p> functionality (I haven't investigated as to why). But you can exchange <p> for <div>, and it will work fine.

<div class="r-stack">
<div class="fragment fade-in-then-out">

part __one__ of *the* quote

</div>
<div class="fragment fade-in-then-out">

part __two__ of *the* quote

</div>
</div>

I fear this is likely too late to help you, but if it is, I hope it benefits everyone else who comes along later!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests