如何在滚动到另一个部分之前制作动画？

Question

案例很简单：有一个网站有几个部分。因此，在每次滚动时，会出现另一个部分。

现在有些部分可能有一个文本块，应该以动画形式播放。

如果有没有动画文字块，则应该具有向下滚动的正常行为：

1. st scroll应该向下滚动到下一部分。

如果有动画文本块，则滚动顺序应为：

1. st scroll应该为文本块设置动画;也留在当前部分

2. 然后滚动，然后向下滚动到下一部分。

有没有一种简单的方法可以达到这个目的？

Answer 1

取消滚动时从https://github.com/alvarotrigo/fullPage.js#callbacks

$('#fullpage').fullpage({
    onLeave: function(index, nextIndex, direction){
        //it won't scroll if the destination is the 3rd section
        if(nextIndex == 3){
            return false;
        }
    }
});

您可以使用参数或方法更改onLeave回调，以确定是否存在飞行文本，然后继续下一部分，或者飞行文本需要飞入并取消转到下一部分。

Answer 2

除了使用@dieend命名的回调（这是处理javascript动画和动作的最佳方法）之外，您还可以使用fullpage.js添加的状态类，例如添加到活动的active类部分或fp-viwing-x-y添加到身体。

通过这种方式，您可以单独使用CSS来处理动画。

您有州级类列表on the docs

这里a video tutorial关于如何使用添加到正文中的类来创建动画。