在 owl.carousel.change 上为 CSS 制作动画

Question

我使用这个猫头鹰轮播并添加动画.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

Bowl Carousel 2 库支持动画幻灯片切换。可以将要添加的动画类传递给 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 事件(不是 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>