等待CSS动画完成，然后滚动到fullpage.js

Question

我想实现一种类似于this网站首页上看到的效果，其中，当前部分的内容会按比例缩小以在滚动之前显示彩色边框。我不确定该网站用于整页滚动的代码是什么，但是我想使用fullpage.js实现此目的。

基本上，我希望能够在该部分滚动到下一个之前等待CSS动画完成。

我的想法是使用fullpage.js onLeave函数，返回false以取消滚动事件，然后使用fullpage_api.moveSectionUp()移至setTimeout之后的下一部分（CSS动画时间总是一样的，所以我可以将其硬编码到timeout中。

问题

我在this的答案中找到了代码，几乎可以完全完成我想要的操作，但是唯一的问题是，一旦停止滚动，该部分仅会滚动到下一个部分，也就是说，如果不停止滚动几秒钟，滚动将比动画时间延迟得更多。

这是我在that SO answer中使用的代码：

let done = false;
let animationTimeout;
let transitionTimeout;
let delay = 300;
let transitionTime = 300;

...

    onLeave: function (origin, destination, direction) {

        if (done) return ;

        // cancel any previous timeout as onLeave fires quite a bit.
        clearTimeout(animationTimeout);
        clearTimeout(transitionTimeout);

        // SCALING ANIMATION HERE (done by adding a class to the section)

        animationTimeout = setTimeout(()=>{

            // deal with scroll
            done = true;

            if (direction === 'down') {

                fullpage_api.moveSectionDown();

            } else {

                fullpage_api.moveSectionUp();

            }

            transitionTimeout = setTimeout(()=>done = false, transitionTime);

        }, delay);

        return done;

    },

您还可以在this JS Fiddle中看到，除非停止滚动，否则fullpage.js不会滚动到下一部分。

所以...

在fullpage.js滚动到下一部分之前，如何等待CSS动画完成？