How to stop or delay flexslider animation using the before() callback?

Question

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.

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

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.

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.

Answer 1

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

I'm using as my slider options:

animation: 'fade',
animationSpeed: 0;

I hope this helps someone.