Fullpage.js 如何动态化过渡

Question

我需要我的代码工作如下：当我从一个部分滚动到另一个独立的向上或向下滚动时，在当前部分中包含 .compass-areas-centered 和 .bg-areas 类。

HTML

下面的代码生成动态部分

<?php foreach ( $items as $k => $post ) : setup_postdata( $post ); ?>

<div class="section">

    <div class="large-12 columns compass-areas">

        <img src="<?php echo $secaoImgUrl[0]; ?>" class="bg-areas" />

        <div class="compass-areas-centered">
            <!-- .compass-areas-centered -->
        </div>

    </div>

</div><!-- .section -->

<?php endforeach; wp_reset_postdata(); ?>

JS

 onLeave: function( index, nextIndex, direction ){

        var leavingSection = $(this);

        // AFTER LEAVE HOME APPLY FX IN COMPASS
        if( index == 1 && nextIndex == 2 ){
            $( '.compass-areas-centered' ).toggleClass( 'animated fadeInDown' );
            $( '.bg-areas' ).toggleClass( 'animated fadeInUp' );
        }

        if( index == 2 && nextIndex == 3 ){
            $( '.compass-areas-centered' ).toggleClass( 'animated fadeInDown' );
            $( '.bg-areas' ).toggleClass( 'animated fadeInUp' );
        }

        if( index == 3 && nextIndex == 4 ){
            $( '.compass-areas-centered' ).toggleClass( 'animated fadeInDown' );
            $( '.bg-areas' ).toggleClass( 'animated fadeInUp' );
        }

        if( index == 4 && nextIndex == 5 ){
            $( '.compass-areas-centered' ).toggleClass( 'animated fadeInDown' );
            $( '.bg-areas' ).toggleClass( 'animated fadeInUp' );
        }

    }

JS FIDDLE https://jsfiddle.net/y3barsq6/ 动图有时我需要回到效果器工作 http://giphy.com/gifs/l3V0Bhrg1PJ33HMBi

Answer 1

您似乎正在使用 animate.css 库。

只需阅读 in the docs 动画完成后删除类的推荐方法：

$.fn.extend({
    animateCss: function (animationName) {
        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
        $(this).addClass('animated ' + animationName).one(animationEnd, function() {
            $(this).removeClass('animated ' + animationName);
        });
    }
});

然后使用：

$('#yourElement').animateCss('bounce');

Fullpage.js 如何动态化过渡

Fullpage.js how to dynamize transitions

jquery

css-transitions

animate.css

fullpage.js