fullpage.js ：在方向=向上 / 方向=向下使用 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');