Hide show.js snippets after they appear

Question

Let's say I have a simple show.js slide:

<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 “firsts” to appear only in fragment 1, and then again hide in fragment 2 when the “second” appears. How can I do it?

Answer 1

The current-visible class is what you are looking for, see the document for snippets: https://github.com/hakimel/reveal.js/#fragments

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

Answer 2

If you want to completely remove the space made by the hidden element after showing it, 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; } 

Also, if you don't want this behavior for other time-visible snippets, you can simply add your own class to your selectors and HTML elements.

Answer 3

Just to continue the answer to the dodo. If you want to completely remove an element, but also want some 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 cause the item to disappear. 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 cause the item to drop out on the slide.