Nascondi reveal.js frammenti dopo la loro apparizione

Question

dire che ho un semplice reveal.js slide Ti piace questa:

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

Voglio i due "prima" per essere mostrato solo nel frammento 1 e poi tornare indietro nascosto nel frammento 2, quando appare "secondo". Come dovrei farlo?

Answer 1

La classe current-visible è quello che stai cercando, vedere il doc su frammenti: https://github.com/hakimel/reveal.js/#fragments

Per una dimostrazione di questa classe, vedere i reveal.js generali demo: http://lab.hakim.se/reveal-js/#/20/1

Answer 2

Se si desidera rimuovere completamente lo spazio occupato dal elemento nascosto dopo che è stato dimostrato, è possibile utilizzare il seguente selettore CSS e le proprietà:

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

Inoltre, se non si desidera che questo comportamento per altri corrente-v frammenti isible, puoi semplicemente aggiungere una classe personalizzata al tuo selettore e agli elementi HTML.

Answer 3

Solo per espandere la risposta di dodo. Se si desidera rimuovere completamente l'elemento, ma vogliono anche un po 'di animazione, si può fare qualcosa di simile:

.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; 
    } 
} 

È possibile che questo svanirà l'elemento. Puoi anche fare qualcosa di interessante come:

.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; 
    } 
} 

Questo renderà l'oggetto "cadere" della diapositiva.