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

Posted 2023-05-07

【中文标题】Owl Carousel + Animate.css - 动画不起作用

【英文标题】：Owl Craousel + Animate.css - Animation dont work

【发布时间】：2022-01-01 20:55:36

【问题描述】：

我正在使用 owl carousel + animate.css 来实现我的轮播效果，但代码对我不起作用。

我希望第一张卡片缩小并随着第二张卡片滑入而消失。

这是我迄今为止尝试过的。

https://codepen.io/whoisda/pen/eYEaVGd

$(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
  );
  
);

我正在使用： animateOut: 'animate__zoomOut',

这是设计/动画应该是这样的：

https://imgur.com/a/DFpR0bZ

【参考方案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

动画功能仅适用于一项，并且仅在支持透视属性的浏览器中。

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

我希望我的回答越来越好如果有问题，谢谢你告诉我

非常感谢。我似乎错过了那句话的第一部分。滑块正在工作，但这不是我想要的方式。但这是正确的答案。