Glockohnee Glockohnee - 27 days ago 11
CSS Question

fragment - fade in and then fade out

I want a custom fragment animation, so that they fade-right / fade-left in and then fade-out after a short delay. Given that all the Fragments have the class

.visible
and
.current-fragment
. I thought i just could delete the class
.visible
after an short delay and get the wanted result.

It doesn't. My code-snippet doesn't remove the class.
Reading through the .js i see that he adds the
.visible
class for every element.

// Show all fragments
toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR + ' .fragment' ) ).forEach( function( fragment ) {
fragment.classList.add( 'visible' );
} );


Here is my Code-snippet o far:

if ($(".slash__input").hasClass("fade-left") || element.hasClass("fade-right") ) {

$("slash__input").removeClass("visible");

setTimeout(function () {
console.log("working");
$('slash__input').removeClass("visible");
}, 5000);}


Thanks for your answer. Maybe i'm down the wrong path and just should do it with CSS?

Answer

Found in the reveal.js documentation :

Multiple fragments can be applied to the same element sequentially by wrapping it, this will fade in the text on the first step and fade it back out on the second.

<section>
<span class="fragment fade-in">
    <span class="fragment fade-out">I'll fade in, then out</span>
</span>

Be aware of the data-fragment-index="",when building custom fragment animations.