Question

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

它没有。我的代码段并没有删除该类。通过.js阅读我看到他为每个元素添加了.visible类。

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

这是我的Code-snippet远：

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：

多个片段可以通过包装顺序应用于同一个元素，这将在第一步中淡入文本并在第二步淡出它。
<section>
<span class="fragment fade-in">
    <span class="fragment fade-out">I'll fade in, then out</span>
</span>

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

片段 - 淡入淡出然后淡出

1 个答案: