javascript - 如何在 Owl Carousel 中添加随机动画效果？

Question

这是我的代码和 Owl Carousel 的效果

$(document).ready(function(){
          $(".owl-carousel").owlCarousel({
              autoplay:true,
              autoplayTimeout:2000,
              autoplayHoverPause:true,
              dots: true,
              merge:false,
              loop:true,
              items:1,
              animateOut: 'bounce',
              animateIn: 'zoomIn',
          });
        });

这里不再使用一个动画

animateOut: 'bounce',
animateIn: 'zoomIn',

我想在这里使用随机动画。我该怎么做？

Answer 1

试试这个:

function getRandomAnimation(){
    var animationList = ['bounce', 'zoomIn']; 
    return animationList[Math.floor(Math.random() * animationList.length)];
}    

$(document).ready(function(){
      let props = {
          autoplay:true,
          autoplayTimeout:2000,
          autoplayHoverPause:true,
          dots: true,
          merge:false,
          loop:true,
          items:1
      };

      props['animateOut'] = getRandomAnimation();
      props['animateIn'] = getRandomAnimation();

      $(".owl-carousel").owlCarousel(props);
});