aos.js 不适用于 fullPage.js答案

【问题标题】：aos.js doesn't wrk with fullPage.jsaos.js 不适用于 fullPage.js
【发布时间】：2017-03-13 11:02:55
【问题描述】：

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

我想让项目显示为aos.js，但是当 fullPage.js 工作时 aos 不起作用。

【问题讨论】：

试试这个：stackoverflow.com/questions/48474761/…

【解决方案1】：

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

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

但我鼓励您使用fullPage.js callbacks 来触发动画，或者如果您想使用 CSS 来制作动画，我建议您使用 fullPage.js state classes。见this video tutorial。

【讨论】：

这两个选项都不起作用。我正在使用 1 个部分和可滚动的滑块。 AOS 仍然无法正常工作。您还有其他建议吗？

【解决方案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
        }
    }
}

【讨论】：