片段 - 淡入然后淡出

Question

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

没有。我的代码片段没有删除 class。阅读 .js 我看到他为每个元素添加了 .visible class。

// 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=""。

片段 - 淡入然后淡出

fragment - fade in and then fade out

css

jquery

fadein

reveal.js