javascript - owl.carousel.change 上的动画 CSS

Question

我使用这个 owl-carousel 并为这个 slider 中的一些文本添加 animate.css。现在动画开始时效果很好，仅此而已。我需要一些解决方案，如何在 js 中对 owl.carousel.change 上的 .addClass 和 .removeClass 执行操作。我尝试了一些方法，但没有奏效。

 <div id="BG" class="owl-carousel owl-theme">
     <div class="bg-item1">
        <div class="container row h-100">
            <div class="col-sm-12 align-self-center">
                <div class="bg-txt animated fadeInRight delay-2s">
                    <span style="text-transform: uppercase; font-weight:bold;"> SOME TEXT </span>                                          
                </div>
             </div>
        </div>
     </div>
     <div class="bg-item2">
         <div class="container row h-100">
             <div class="col-sm-12 align-self-center">
                  <div class="bg-txt animated fadeInRight delay-2s ">
                     <span style="text-transform: uppercase; font-weight: bold;"> SOME TEXT </span       
                   </div>
              </div>
          </div>
      </div>
</div>

Answer 1

Owl Carousel 2 库支持 animated slide transitions .您可以将要添加的动画类传递到 animateIn 和 animateOut 属性。请参阅下面的代码片段，了解使用 animateIn 的工作示例:

$(document).ready(function() {
  var owl = $('.owl-carousel');

  owl.owlCarousel({
    animateIn: 'fadeInRight delay-2s',
    items: 1,
    loop: true,
    nav: true,
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<div id="BG" class="owl-carousel owl-theme">
  <div class="bg-item1">
    <div class="container row h-100">
      <div class="col-sm-12 align-self-center">
        <div class="bg-txt animated fadeInRight delay-2s">
          <span style="text-transform: uppercase; font-weight:bold;"> SOME TEXT </span>
        </div>
      </div>
    </div>
  </div>
  <div class="bg-item2">
    <div class="container row h-100">
      <div class="col-sm-12 align-self-center">
        <div class="bg-txt animated fadeInRight delay-2s">
          <span style="text-transform: uppercase; font-weight: bold;"> SOME TEXT </span> </div>
      </div>
    </div>
  </div>
</div>

如果您需要在更改幻灯片时为幻灯片中的个别项目设置动画，您可以使用 translate.owl.carousel 事件(NOT change.owl.carousel 因为它似乎不能正常用于此目的)。有关示例，请参见以下代码段:

$(document).ready(function() {
  var owl = $('.owl-carousel');
  owl.owlCarousel({
    items: 1,
    loop: true,
    nav: true,
  });

  $('.owl-carousel').on('translate.owl.carousel', function(e) {
    var index = e.item.index;
    $('.bg-txt').removeClass('animated fadeInRight delay-2s');
    $('.bg-txt').eq(index).addClass('animated fadeInRight delay-2s');
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<div id="BG" class="owl-carousel owl-theme">
  <div class="bg-item1">
    <div class="container row h-100">
      <div class="col-sm-12 align-self-center">
        <div class="bg-txt animated fadeInRight delay-2s">
          <span style="text-transform: uppercase; font-weight:bold;"> SOME TEXT </span>
        </div>
      </div>
    </div>
  </div>
  <div class="bg-item2">
    <div class="container row h-100">
      <div class="col-sm-12 align-self-center">
        <div class="bg-txt">
          <span style="text-transform: uppercase; font-weight: bold;"> SOME TEXT </span> </div>
      </div>
    </div>
  </div>
</div>