html - BS3 carousel + animate.min.css 在 Firefox 中不能完美运行

Question

我在 Ubuntu 14.04 中使用 firefox 33.0。我有一个带有 bootstrap 3 轮播的网站(本地主机)。我已将“动画脉冲”(animate.min.css) 类应用到“class=item”div 中的“img”，并将“animated fadeinleft”应用到我的 carousel-caption。

<div class="item">
   <img src="images/2.jpg" class="img-responsive animated pulse">
       <div class="container">
           <div class="carousel-caption">
               <h1 class="animated fadeinleft">Another example headline.</h1>
               <p class="animated fadeinright">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
         </div>
      </div>
</div>

共有 3 张幻灯片。对于每张幻灯片的第一次出现，图像和旋转木马标题都带有效果 (animate.min.css)。但在那之后，幻灯片只是来来去去，没有任何效果。这只发生在 Firefox 中。在 Chrome 38.0.2125.104 中，它按预期工作。请有人提出解决问题的方法。

Answer 1

如果你看一下他们 site 上的例子类已应用，如果您想再次触发，您需要再次删除和添加类。这就是通过再次删除和添加类来重新启动或触发 CSS3 动画的方式。您可以阅读更多相关信息 here .在您的情况下，这些类不会被删除并再次添加。

对于 Bootstrap，您可以使用 slide.bs.carousel，您可以在其中再次添加类。我已将数据属性 [data-animation] 添加到相应动画的元素中。

<div class="active item">
    <img src="http://lorempixel.com/1024/750" alt="Slide1" class="img-responsive animated pulse" data-animation="pulse" />
    <div class="container">
       <div class="carousel-caption">
           <h1 class="animated fadeInLeft" data-animation="fadeInLeft">Another example headline.</h1>

           <p class="animated fadeInRight" data-animation="fadeInRight">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
       </div>
     </div>
</div>

JS代码

function animateElement(obj, anim_) {
    obj.addClass(anim_ + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
        $(this).removeClass();
    });
}

$('#myCarousel').on('slide.bs.carousel', function (e) {

    var current = $('.item').eq(parseInt($(e.relatedTarget).index()));
    $('[data-animation]').removeClass();
    $('[data-animation]', current).each(function () {
        var $this = $(this);
        var anim_ = $this.data('animation');
        animateElement($this, anim_);
    });
});

Fiddle Demo