aos.js与fullPage.js不兼容

Question

我使用FullPage在各个部分之间进行动画滚动。

Answer 1

如the fullPage.js FAQs中所述

简短回答：如果不想使用自动滚动功能，请使用fullPage.js的scrollBar:true选项或自动滚动:false选项。或者..。对Parallax扩展使用parallax:true。

解释: javascript视差，以及许多其他依赖于站点滚动的插件，监听的scrollTop属性和scroll事件。fullPage.js实际上不会滚动站点，但它会更改站点的translate3d或top属性。只有在使用fullPage.js选项scrollBar:true或autoScrolling:false时，它才会以scrollTop属性可以访问的方式滚动站点。

但是我鼓励你使用fullPage.js callbacks来激发动画，或者如果你想用CSS来做它们的话就用fullPage.js state classes。参见this video tutorial。

Answer 2

我做了这个解决方案-也许它不是完美的，但对我来说是有效的。此外，我还使用了jQuery。

AOS.init();  // AOS initiation

$('.aos-init').removeClass('aos-animate'); // remove ALL classes which triggers animation in document

new fullpage('#fullpage', {   // standard fullpage usage
    responsive: true,
    navigation: true,
    anchors: ['start', 'quality', 'performance', 'dob', 'parameters','compatibility', 'options', 'contact'],

    afterLoad: function(){       
        var a_table = ['start', 'quality', 'performance', 'dob', 'parameters','compatibility', 'options', 'contact'];   // duplicated table of anchors name

        for (var i = 0; i < a_table.length; i++) {
            $('.section-'+ a_table[i] +'.active .aos-init').addClass('aos-animate'); // all magic goes here - when page is active, then all elements with AOS will start animate
        }
    }
}