OWL Carousel v2.0淡入淡出过渡时长无法调整问题求助

我之前也踩过这个坑！你遇到的问题核心原因是：Animate.css的fadeIn/fadeOut类默认动画时长就是1秒，当Owl Carousel使用animateIn/animateOut绑定这些类时，会优先遵循CSS动画的时长设置，而忽略你配置的smartSpeed、dotsSpeed等参数——这就是为什么不管怎么调JS配置，过渡时长都固定在1秒左右。

下面是两种可行的解决方案：

方案1：自定义Animate.css动画时长（推荐） #

不需要修改Animate.css源码，通过添加自定义CSS类来覆盖默认时长：

/* 自定义淡入动画时长为3秒，你可以改成任意需要的数值 */
.fadeIn-long {
  animation-duration: 3s;
}

/* 自定义淡出动画时长为3秒 */
.fadeOut-long {
  animation-duration: 3s;
}

然后在Owl Carousel的配置里，把animateIn和animateOut改成默认类+自定义类的组合：

owl.owlCarousel({
  nav: false,
  items: 1, // 注意：v2里singleItem已经被items:1替代，建议统一用这个
  smartSpeed: 3000, // 这里可以和动画时长保持一致，确保同步
  autoplay: true,
  autoplayTimeout: 8000, // 要大于动画时长，比如3秒动画+5秒停留=8秒
  autoplayHoverPause: false,
  animateIn: 'fadeIn fadeIn-long', // 绑定自定义时长的淡入类
  animateOut: 'fadeOut fadeOut-long', // 绑定自定义时长的淡出类
  pagination: false
  // 其他配置...
});

方案2：直接修改Animate.css源码（不推荐） #

如果你确定不会更新Animate.css，可以找到源码里的fadeIn和fadeOut类，修改animation-duration属性：

/* 在Animate.css中找到这些类并修改 */
.fadeIn {
  animation-name: fadeIn;
  animation-duration: 3s; /* 把默认的1s改成你要的时长 */
}

.fadeOut {
  animation-name: fadeOut;
  animation-duration: 3s;
}

这种方法的缺点是，以后更新Animate.css时，修改会被覆盖，所以优先推荐方案1。

另外要注意：autoplayTimeout的数值一定要大于你的动画时长，否则会出现幻灯片还没完成过渡就开始切换的情况，影响视觉效果。

内容的提问来源于stack exchange，提问作者Barton