javascript - 如何使用 before() 回调停止或延迟 flexslider 动画？

Question

我在 flexslider 动画到下一张幻灯片之前在幻灯片的所有元素上添加一个类 .animate-out ，问题是应用的 css 动画不会显示，因为 flexslider 移动立即转到下一张幻灯片。

我使用 flexslider 的 before() 回调函数添加该类，即 called在为 slider 设置动画的函数内部，因此使用 slider.pause() 来暂停 slider 为时已晚(使用它将暂停下一张幻灯片)。

我已经在 before() 回调函数中使用 alert() 测试了动画，该函数暂停了 javascript 执行，我可以看到 添加的 css 动画.animate-out.

有没有办法阻止 slider 动画(稍后我将使用 slide.flexAnimate() 手动动画)？如果没有，有没有办法延迟滑动？ Here's the code on Github .

Answer 1

目前延迟动画以显示 CSS 动画的唯一方法是使用 .delay()在当前幻灯片和我们要制作动画的幻灯片上:

before: function(slider) {
        // TODO: check if the browser supports css animations before delaying the slides

        // delay slide fadeOut to show the css animations
        slider.slides.eq(slider.currentSlide).delay(1000);

        // delay slide fadeIn until the animations on the prev slide are over
        slider.slides.eq(slider.animatingTo).delay(1000);

}

要了解我为什么使用此代码，您可以检查 slider 代码 fade animation这是:

if (!touch) {
       slider.slides.eq(slider.currentSlide).fadeOut(vars.animationSpeed, vars.easing);
       slider.slides.eq(target).fadeIn(vars.animationSpeed, vars.easing, slider.wrapup);
}

我使用的 slider 选项:

animation: 'fade',
animationSpeed: 0;

我希望这对某人有帮助。