Hide reveal.js fragments after their appearance

Question

Say I have a simple reveal.js slide like this:

<section>
  <h2 class="fragment" data-fragment-index="1">first</h2>
  <h2 class="fragment" data-fragment-index="2">second</h2>
  <h2 class="fragment" data-fragment-index="1">first</h2>
</section>

I want the two "first" to be shown only in fragment 1 and then go back hidden in fragment 2, when "second" appears. How should I do that?

Mitran

Answer 1

The current-visible class is what you're looking for, see the doc on fragments: https://github.com/hakimel/reveal.js/#fragments

For a demonstration of this class, see the general reveal.js demo: http://lab.hakim.se/reveal-js/#/20/1

Strict

Keep in mind this will only change a fragment's visibility, so it will still occupy the space. If you want to replace a fragment, add some css that changes not the visibility but the height (from 0 to auto). – Revalue

The documentation link doesn't work anymore and just redirects to the github repo. Maybe replace it with revealjs.com/layout (which mentions current-visible) and revealjs.com/fragments which explains fragments. – Mafala

Answer 2

If you want to completely remove the space taken by the hidden element after it was shown, you can use the following CSS selector and properties:

.fragment.current-visible.visible:not(.current-fragment) {
    display: none;
    height:0px;
    line-height: 0px;
    font-size: 0px;
}

Additionally if you don't want this behavior for other current-visible fragments, you can just add a custom class to your selector and HTML elements.

Zion

It works, but the animation with this is far from flawless. – Heighttopaper

What worked for me was: .fragment.visible:not(.current-fragment) without the .current-visible. – Horacehoracio

You can add css animation, I've added answer demonstrating that. – Collimator

Answer 3

One could also use this solution :

.reveal .slides section .fragment {
    opacity: 0;
    display: none; }
.reveal .slides section .fragment.current-fragment {
    opacity: 1;
    display: inline; }

Indigestion

Answer 4

Just to expand on dodo's answer. If you want to completely remove the element, but also want a bit of animation, you can do something like:

.fragment.current-visible.visible:not(.current-fragment) {
    animation: removed-item-animation 1s cubic-bezier(0.6, -0.05, 0.9, 0.9) forwards;
}
@keyframes removed-item-animation {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        line-height: 0px;
        font-size: 0px;
        height: 0px;
        display: none;
    }
}

The above will fade out the element. You can also do something cool like:

.fragment.current-visible.visible:not(.current-fragment) {
    animation: removed-item-animation 1.5s cubic-bezier(0.6, -0.05, 0.9, 0.9) forwards;
    transform-origin: 0% 100%;
}
@keyframes removed-item-animation {
    0% {
        opacity: 1;
        transform: rotateZ(0);
    }

    100% {
        opacity: 0;
        transform: translateY(900px) rotateZ(70deg);
        line-height: 0px;
        display: none;
    }
}

This will make the item to "fall out" of the slide.

Collimator