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

我正在添加一个类

。在flexslider为下一张幻灯片制作动画之前，在幻灯片的所有元素上设置动画，问题是应用的css动画不会显示，因为flexslider会立即移动到下一张幻灯片

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

我已经在暂停javascript执行的
before（）
回调函数中使用
alert（）
测试了动画，我可以看到
添加的css动画

有没有办法阻止滑块设置动画（稍后我将使用
slide.flexAnimate（）
手动设置动画）？如果没有的话，有没有办法推迟幻灯片
 当前唯一延迟动画以显示css动画的方法是在当前幻灯片和我们正在制作动画的幻灯片上使用：

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;

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

在本例中，我们假设每个转换的持续时间为500ms。相应地熟练地将参数调整到过渡速度

首先，我们在slides容器上设置一个转换延迟（flexslider也通过CSS3为其设置动画）：

技巧不是使用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”回调中的超时设置为淡出持续时间+滑动速度，并且自定义转换类触发的淡入转换将在滑动完成后立即执行

要获得更平滑的动画，请尝试缩短设置超时延迟。这将混合滑动和幻灯片过渡动画，可能会产生一些不错的幻灯片效果。
谢谢您的信息。我也用你的解决方案解决了我的问题。有关预定义属性，请参见。太棒了！谢谢我要添加的唯一一件事，您在帖子中没有指定的是
.flexslider.slides li{transition:margin left 0.5s ease in；}
，以便滑动正常工作
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);
}