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文档中关于如何多次制作动画的内容:

$.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');