暂停滚动到下一个'幻灯片',直到所有动画完成

Question

我正在为Skrollr滑块创建一个"有限的"可视化构建器.它允许用户构建由section页面上彼此相邻的幻灯片(html 标签)组成的滑块,每个幻灯片包含许多应用了Skrollr数据属性/动画(关键帧？)的html元素.

有没有办法暂停幻灯片(前进到下一张幻灯片),直到所有内部元素都完成了动画？

我知道这个例子pausing.html可以证明我需要什么,但是这些"幻灯片"已修复,这可能会给我的用户带来问题.滑块将被放入WordPress网站主题,大多数元素都没有修复.

因为幻灯片内容是如此动态和不可预测,很难知道锁定滚动多长时间？希望有可能做到这一点？

我的困境的例子:

.... Some regular WordPress page content (Navbar, Header maybe posts, etc.)

<div id="skrollr-body">

    // Pause this slides scrolling till all child elements have completed their animations
    // Slide child elements will ALWAYS have relative animations (data-100-top="..." NOT data-100="...")
    <section id="slide-1" class="slide">

        <p data-center="opacity: 1;" data-top="opacity: 0;">Some awesomeness</p>

        <img data--100-center="transform: translate(-100%,0);" data-top="transform: translate(0,0);"  src="..."/>

        ... lots of other elements

    </section>

    <section id="slide-2" class="slide">
        ...
    </section>

    <section id="slide-3" class="slide">
        ...
    </section>

</div>

.... Some regular WordPress page content (Footer, maybe posts, etc.)

Answer 1

禁用下一个按钮直到动画完成，您可以在 CSS 动画完成后启用。这里有一篇文章解释了如何跟踪 CSS 动画回调。