如何使用before（）回调来停止或延迟flexslider动画？ [英] How to stop or delay flexslider animation using the before() callback?

问题描述

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

I'm adding a class .animate-out on all the elements of the slides before flexslider animates to the next slide, the issue is that the css animation applied won't show because flexslider moves to the next slide immediately.

我在使用flexslider的之前添加了这个类（）在动画功能中调用的回调函数滑块，所以用 slider.pause（）暂停滑块（使用它会暂停下一张幻灯片）为时已晚。

I'm adding the class using flexslider's before() callback function which is called inside the function that animates the slider, so it's too late to use slider.pause() to pause the slider (using it will pause the next slide).

我已经在 before（）回调函数中使用 alert（）测试了动画javascript执行，我可以看到由 .animate-out 添加的css动画。

I already tested the animations using alert() inside the before() callback function which pauses the javascript execution and I can see the css animations added by .animate-out.

有没有办法停止滑块动画（稍后我将使用 slide.flexAnimate（）手动设置动画） ？如果没有，是否有办法延迟幻灯片？ 这是Github上的代码。

is there a way to stop the slider from animating (I will use slide.flexAnimate() later to animate manually) ? and if not is there a way to delay the slide ? Here's the code on Github.

推荐答案

目前，延迟动画显示css动画的唯一方法是使用 .delay（） 当前幻灯片和我们正在设置的动画：

Currently the only way to delay the animation to show the css animations is using .delay() on the current slide and the one we're animating to:

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);

}

要知道我使用此代码的原因，您可以查看滑块淡入淡出动画的代码：

To know why I used this code you can check the slider code for fade animation which is:

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

我用作我的滑块选项：

animation: 'fade',
animationSpeed: 0;

我希望这有助于某人。

这篇关于如何使用before（）回调来停止或延迟flexslider动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！