如何使用before（）回调来停止或延迟flexslider动画？
我在幻灯片放映到下一张幻灯片之前在幻灯片的所有元素上添加了一个类.animate-out ，问题是应用的css动画不会显示，因为flexslider会立即移动到下一张幻灯片。
我正在使用flexslider的before()回调函数添加该类，该函数在为滑块设置动画的函数内部调用 ，因此使用slider.pause()暂停滑块（使用它将暂停下一张幻灯片）为时已晚。
我已经在before()回调函数中使用alert()测试了动画，该函数暂停了javascript执行，我可以看到.animate-out添加的css动画。
有没有办法阻止滑块动画（我稍后会使用slide.flexAnimate()手动动画）？ 如果没有，是否有办法延迟幻灯片？ 这是Github上的代码 。
目前，延迟动画显示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); }
要知道我使用此代码的原因，您可以检查淡入淡出动画的滑块代码，它是：
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;
我希望这可以帮助别人。
还有另一种方法可以获得所需的效果，而无需暂停滑块。 这也适用于设置为“幻灯片”的动画。
对于此示例，我们假设每个转换的持续时间为500毫秒。 相应地使您的过渡速度充分参与。
首先我们在幻灯片容器上设置转换延迟（由flexslider通过CSS3设置动画）：
.flexslider .slides { transition-delay: 0.5s; -webkit-transition-delay: 0.5s }
诀窍不是使用flexslider提供的’.flex-active-slide’类来构建转换，而是使用我们自己的转换类，只需通过flexsliders的回调将该类应用于幻灯片元素：
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延迟。 这将混合滑动和幻灯片过渡动画，这可能会产生一些不错的幻灯片效果。