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

fullpage.js：在方向上使用2个不同的动画=向上/方向=向下

1 个答案: