Question

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

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

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

有没有办法停止滑块动画（我稍后会用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);

}

要知道我使用此代码的原因，您可以查看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);
}

我正在使用我的滑块选项：

animation: 'fade',
animationSpeed: 0;

我希望这有助于某人。

Answer 2

还有另一种方法可以获得所需的效果，而无需暂停滑块。这也适用于设置为“幻灯片”的动画。

对于这个例子，我们假设每个转换的持续时间是500ms。相应地使你的过渡速度充分参与。

首先我们在幻灯片容器上设置一个转换延迟（由flexslider通过CSS3设置动画）：

.flexslider .slides {
    transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s
}

诀窍不是使用flexslider提供的'.flex-active-slide'类来构建转换，而是使用我们自己的转换类，只需通过flexsliders的回调将该类应用于幻灯片元素： / p>

start: function(slider) {
    slider.slides.eq(slider.currentSlide).addClass('flex-active-transition');
},
before: function(slider) {
    slider.slides.eq(slider.currentSlide).removeClass('flex-active-transition');
},
after: function(slider) {
    setTimeout(function() {
        slider.slides.eq(slider.currentSlide).addClass('flex-active-transition');
    }, 700);
}

这将在滑动发生后延迟添加转换类'.flex-active-transition'并且已经设置动画淡出过渡并在每张幻灯片开始之前删除该类。我们现在可以将这个类用于所有CSS3过渡。

由于滑动本身已经被我们的CSS声明延迟，滑动过渡现在将在滑块滑动之前执行。我们可以将“after”回调中的超时设置为淡出的持续时间+我们的滑动速度，并且在滑动完成后将执行自定义过渡类触发的淡入过渡。

要获得更流畅的动画，请尝试缩短setTimeout延迟。这将混合滑动和幻灯片过渡动画，这可能会产生一些不错的幻灯片效果。

如何使用before（）回调来停止或延迟flexslider动画？

2 个答案: