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

Question

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

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

我已经在 before() 回调函数中使用 alert() 测试了动画，该函数暂停了 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

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

对于本示例，我们假设每个转换的持续时间为 500 毫秒。相应地调整参数以适应您的过渡速度。

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

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

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

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 延迟。这将混合滑动和幻灯片过渡动画，这可能会产生一些不错的幻灯片效果。