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?

Answer 1

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.

Answer 2

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

Answer 3

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.