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
Comments
You'll need to wrap both elements in a single container which has This isn't included in the framework since, compared to all other fragments, it requires an additional DOM element. |
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. |
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. |
Hey,
|
Hi, 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> |
@okyear Thanks for your answer/comment. Your solution worked great for me. I used it in markdown - set the class by putting You should consider doing a PR. This would be a great addition. |
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. |
The trouble with |
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: |
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. |
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. |
@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 <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! |
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:
Would be a nice feature to have.
The text was updated successfully, but these errors were encountered: