将动画 css 添加到 flexslider 标题答案

【问题标题】：Adding animate css to a flexslider caption将动画 css 添加到 flexslider 标题
【发布时间】：2015-04-14 14:51:56
【问题描述】：

我对 jquery 的了解非常有限，但基本上当class=flex-active-slide 添加到幻灯片时，我希望将class=animate fadeInUp 添加到class="caption-inner"

$(document).ready(function(){
   $('.flex-active-slide .caption-inner').addClass('animate fadeInUp');});

最终目标是在每次滑块更改时激活动画 css

【问题讨论】：

此代码在文档准备好时而不是在动画之后添加类。您需要找到添加 flex-active 类的位置，然后添加您的类
github.com/woothemes/FlexSlider/blob/master/… 看起来像第 160 行的 jqeury 创建
使用before or after callbacks。
我将如何去做@AndréDion？

标签： javascript jquery css animate.css

【解决方案1】：

只需将其添加到您的 CSS 中

.flexslider .flex-active-slide .animation.animated-item-1 {
-webkit-animation: fadeInDown 1500ms linear 1500ms both;
-moz-animation: fadeInDown 1500ms linear 1500ms both;
-o-animation: fadeInDown 1500ms linear 1500ms both;
-ms-animation: fadeInDown 1500ms linear 1500ms both;
animation: fadeInDown 1500ms linear 1500ms both;
}

您当然可以做出更多变化。给 Flexslider 足够的时间先加载图像，因此需要 1500 毫秒。

在 HTML 中添加元素（h1 或 p）

class="animation animated-item-1"

就是这样！享受吧，约翰

【讨论】：

【解决方案2】：

我能够使用下面的代码让我的工作

$('.flexslider').flexslider({
    animation: "fade",
    before: function(slider){
      $(slider).find(".flex-active-slide").find('.caption-inner').each(function(){
       $(this).removeClass("animated fadeInUp");
       });
     },
    after: function(slider){
          $(slider).find(".flex-active-slide").find('.caption-inner').addClass("animated fadeInUp");
      },

});

这应该会让你继续前进

【讨论】：

【解决方案3】：

包含 animate.css 并为 flexslider 的活动幻灯片添加以下样式：

.flex-active-slide .flex-caption{
    animation-name:slideInUp; 
    animation-duration:1s;
    animation-fill-mode:both
}

【讨论】：

【解决方案4】：

当你实例化你的滑块时，使用after 回调来应用你的类：

$('.slider').flexslider({
    after: function(slider) {
        slider.slides.eq(slider.currentItem).find('.caption-inner').addClass('animate fadeInUp');
    }
});

【讨论】：

这对我不起作用，遗憾的是 flex 滑块将当前类生成为 flex-active-slide。如果这有帮助，我真的需要弄清楚这些东西啊哈