2

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

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

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

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

4

2 回答 2

5

目前，延迟动画以显示 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;

我希望这可以帮助别人。

于 2013-03-26T08:45:45.110 回答
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 延迟。这将混合滑动和幻灯片过渡动画，这可能会产生一些不错的幻灯片效果。

于 2013-12-02T17:42:53.937 回答