Owl 轮播 + Animate.css - 动画不起作用

Question

我正在使用 owl 旋转木马 + animate.css 来为我的旋转木马实现效果，但代码对我不起作用。

我希望第一张卡片在第二张卡片滑入时缩小并消失。

这是我到目前为止尝试过的方法。

$(document).ready(function() {
 
  $("#owl-example").owlCarousel({
    navigation: true,
    navigationText: ["", ""],
    singleItem: true,
    loop: true,
    autoplay: true,
    animateIn: 'animate__fadeIn',
    animateOut: 'animate__zoomOut',
    items:4,
    margin:30,
    stagePadding:100,
    smartSpeed:400,
    slideSpeed: 300
  });
  
});

我正在使用：动画输出：'animate__zoomOut',

这是 design/animation 应该看起来像这样：

https://imgur.com/a/DFpR0bZ

Answer 1

基于插件文档：您不能在显示超过一项的情况下使用动画

如果你使用

$(document).ready(function() {
 
  $("#owl-example").owlCarousel({
    navigation: true,
    navigationText: ["", ""],
    singleItem: true,
    loop: true,
    autoplay: true,
    animateIn: 'animate__fadeIn',
    animateOut: 'animate__zoomOut',
    items:1,
    margin:30,
    stagePadding:100,
    smartSpeed:400,
    slideSpeed: 300
  });
  
});

没问题但是只显示一项

访问https://owlcarousel2.github.io/OwlCarousel2/demos/animate.html

Animate functions work only with one item and only in browsers that support perspective property.

Owl 轮播 + Animate.css - 动画不起作用

Owl Craousel + Animate.css - Animation dont work

html

javascript

scale

animate.css

owl-carousel