fullpage.js :在direction=up / direction=down上使用2种不同的动画

Question

所以我用的是fullpage.js和animate.css，但不是这样的，我只能在关机时让动画工作一次。我想再做一次反向动画，或者任何向上或向下的动画。基本上，我希望动画每次我进入一个部分，而不是只有一次！

我是个新手，所以我需要一点帮助，谢谢！

            //animation section1 AFTERLOAD
            'afterLoad': function(anchorLink, index){
                var $AnimPage1 = $('#section1 .is-animated');

                if(index == 1){
                    $AnimPage1.addClass('animated slideInDown');
                }
            },

            //animation section ONLEAVE
            'onLeave': function(index, nextIndex, direction){
                var $AnimPage1 = $('#section1 .is-animated');
                var $AnimPage2 = $('#section2 .is-animated');
                var $AnimPage3 = $('#section3 .is-animated');
                var $AnimPage4 = $('#section4 .is-animated');
                var $AnimPage5 = $('#section5 .is-animated');

                if (index == 1 && direction == 'down'){
                    $AnimPage2.addClass('animated slideInUp');
                }
                if (index == 2 && direction == 'down'){
                    $AnimPage3.addClass('animated slideInUp');
                }
                if (index == 3 && direction == 'down'){
                    $AnimPage4.addClass('animated slideInUp');
                }
                if (index == 4 && direction == 'down'){
                    $AnimPage5.addClass('animated slideInUp');
                }

            }

Answer 1

您应该检查animate.css 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');