Search code examples
jquerycssfadeinreveal.js

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?

Solution

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