jquery - 片段 - 淡入然后淡出

Question

我想要一个自定义片段动画，以便它们淡入右/淡入左，然后在短暂延迟后淡出。假定所有片段都具有类 .visible 和 .current-fragment。我以为我可以在短暂的延迟后删除类 .visible 并获得想要的结果。

事实并非如此。我的代码片段没有删除类(class)。阅读 .js 我看到他为每个元素添加了 .visible 类。

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

到目前为止，这是我的代码片段:

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

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

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

感谢您的回答。也许我走错了路，应该用 CSS 来做？

Answer 1

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

在构建自定义片段动画时，请注意 data-fragment-index=""。