Fullpage.js afterSlideLoad -在幻灯片上重用动画

Question

我不知道我到底做错了什么。

我想在每张幻灯片上重复使用我的幻灯片动画，这样我就不必复制/粘贴每个索引了。

我可以看到，除了0之外，我的控制台日志在每张幻灯片上都会触发(这是应该的)，但是动画只出现在那之后的第一张幻灯片上(1)，为什么？

HTML：

<div class="section section-bg product-development">
    <a href="#digital-innovation" class="btn btn-small process-anchor pos-bottom">digital innovation</a>
    <div class="slide main-slide">
        <div class="slide-svg-container"><img src="images/svg/Think_it.svg" /></div>
        <div class="content-wrapper">
            <h1>PRODUCT DEVELOPMENT PROCESS</h1>
            <p>Our product development framework is designed to invent, build and bring digital products to market, using methods from design thinking, service design and lean startup methodology.</p>
            <p>Through a carefully constructed route, we will take you all the way from inventing and designing your digital product, to building and testing it and to planning and promoting a successful launch in the market.</p>
            <p>
                <a class="btn btn-extra-small ghost" href=" #product-development/1">Frame it</a>
                <a class="btn btn-extra-small ghost" href=" #product-development/2">Think it</a>
                <a class="btn btn-extra-small ghost" href=" #product-development/3">Design it</a>
                <a class="btn btn-extra-small ghost" href=" #product-development/4">Build it</a>
                <a class="btn btn-extra-small ghost" href=" #product-development/5">Test it</a>
                <a class="btn btn-extra-small ghost" href=" #product-development/6">Market it</a>
                <a class="btn btn-extra-small ghost" href=" #product-development/7">Tweak it</a></p>
        </div>
    </div>
    <div class="slide">
        <div class="slide-svg-container"><img class="is-animated" src="images/svg/Think_it.svg" /></div>
        <div class="content-wrapper">
            <h2 class="is-animated">Frame it</h2>
            <p class="is-animated">We work strategically to solve every task. But we don’t do it alone. We do it together with our clients. Collectively, we frame your challenges and needs. We explore what the problem is, who we are solving it for. And we define your business strategic and tactical objectives.</p>
            <a href="#product-development" class="btn btn-small ghost is-animated">back</a> <a href="#" class="btn is-animated">Tasks</a> <a href="#" class="btn is-animated">Targets</a>
        </div>
    </div>
    <div class="slide">
        <div class="slide-svg-container"><img class="is-animated" src="images/svg/Think_it.svg" /></div>
        <div class="content-wrapper">
            <h2 class="is-animated">Think it</h2>
            <p class="is-animated">We work conceptually in everything we do. We generate ideas and create concept solutions to solve the challenge and accommodate your objectives. This is done through a customer-centric perspective making sure that the concepts always aim for excellent customer experiences.</p>
            <a href="#product-development" class="btn btn-small ghost is-animated">back</a> <a href="#" class="btn is-animated">Tasks</a> <a href="#" class="btn is-animated">Targets</a>
        </div>
    </div>
    <div class="slide">
        <div class="slide-svg-container"><img class="is-animated" src="images/svg/Think_it.svg" /></div>
        <div class="content-wrapper">
            <h2 class="is-animated">Design it </h2>
            <p class="is-animated">We put the concepts into action, visualizing their look-and-feel, benefits, features, functionality etc. Designing great products is about designing great experiences across touchpoints. It is storytelling and visualization. It is about designing content and designing digital. </p>
            <a href="#product-development" class="btn btn-small ghost is-animated">back</a> <a href="#" class="btn is-animated">Tasks</a> <a href="#" class="btn is-animated">Targets</a>
        </div>
    </div>
    <div class="slide">
        <div class="slide-svg-container"><img class="is-animated" src="images/svg/Think_it.svg" /></div>
        <div class="content-wrapper">
            <h2 class="is-animated">Build it</h2>
            <p class="is-animated">Technical aspects of the digital product are incorporated from the get go to secure the sustainability of our solutions. In the production phase, we transform design into solution through front-end and back-end development. We transform tested prototypes into beta products.</p>
            <a href="#product-development" class="btn btn-small ghost is-animated">back</a> <a href="#" class="btn is-animated">Tasks</a> <a href="#" class="btn is-animated">Targets</a>
        </div>
    </div>
    <div class="slide">
        <div class="slide-svg-container"><img class="is-animated" src="images/svg/Think_it.svg" /></div>
        <div class="content-wrapper">
            <h2 class="is-animated">Test it</h2>
            <p class="is-animated">We make sure that the digital product lives up to its purpose and objectives on a strategic, communicative and technical level. Before the beta launch, we set up analytics and performance metrics in accordance with your business objectives and conduct both user and browser testing.</p>
            <a href="#product-development" class="btn btn-small ghost is-animated">back</a> <a href="#" class="btn is-animated">Tasks</a> <a href="#" class="btn is-animated">Targets</a>
        </div>
    </div>
    <div class="slide">
        <div class="slide-svg-container"><img class="is-animated" src="images/svg/Think_it.svg" /></div>
        <div class="content-wrapper">
            <h2 class="is-animated">Market it </h2>
            <p class="is-animated">The digital product is prepared for external roll-out. We plan the launch of your new digital product with defined routes to the market. This entails a blueprint or game plan, laying out the goals and/or KPIs for the launch. This entails establishing a go-to-market plan and developing campaigns.</p>
            <a href="#product-development" class="btn btn-small ghost is-animated">back</a> <a href="#" class="btn is-animated">Tasks</a> <a href="#" class="btn is-animated">Targets</a>
        </div>
    </div>
    <div class="slide">
        <div class="slide-svg-container"><img class="is-animated" src="images/svg/Think_it.svg" /></div>
        <div class="content-wrapper">
            <h2 class="is-animated">Tweak it</h2>
            <p class="is-animated">We won’t leave you hanging. During product development, we’ve set set up analytics and metrics to measure the performance and impact of the digital product. Thus, we make the necessary improvements when moving from bra til version 1.0.</p>
            <a href="#product-development" class="btn btn-small ghost is-animated">back</a> <a href="#" class="btn is-animated">Tasks</a> <a href="#" class="btn is-animated">Targets</a>
        </div>
    </div>
</div>

JS：

$('#fullpage-process').fullpage({
    //Scrolling
    scrollingSpeed: 1000,
    scrollBar: false,
    anchors:['process-home', 'product-development', 'digital-innovation', 'get-in-touch'],
    easing: 'easeInOutCubic',
    continuousVertical: false,
    autoScrolling: true,
    css3:false,
    responsiveWidth: 768,

    //Navigation
    slidesNavigation: true,

    afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
        var $slideAnimation = $('.slide .is-animated')

        if($('.slide.active').index() > 0){
            $slideAnimation.slice(0,6).css({animationTimingFunction: "ease-in-out"}).addClass("animated");
            console.log("slide loaded" + slideIndex);
            //image
            $slideAnimation.eq(0).addClass("fadeInDown").css({
                animationDelay: "0.0s",
                animationDuration: "0.750s"
            });
            //h1
            $slideAnimation.eq(1).addClass("fadeInUp").css({
                animationDelay: "0.0s",
                animationDuration: "0.750s"
            });
            // text
            $slideAnimation.eq(2).addClass("fadeInUp").css({
                animationDelay: "0.500s",
                animationDuration: "0.750s"
            });
            // btn back
            $slideAnimation.eq(3).addClass("fadeIn").css({
                animationDelay: "0.750s",
                animationDuration: "0.750s"
            });
            // btn tasks
            $slideAnimation.eq(4).addClass("fadeIn").css({
                animationDelay: "1.0s",
                animationDuration: "0.750s"
            });
            // btn targets
            $slideAnimation.eq(5).addClass("fadeIn").css({
                animationDelay: "1.250s",
                animationDuration: "0.750s"
            });
        }
    }
});

Answer 1

如果我没理解错的话，你的动画每张幻灯片只触发一次。原因是afterSlideLoad event只触发一次。你可以试试onSlideLeave，似乎每次你切换幻灯片时它都会被触发。