javascript - Owl Carousel 2 无法制作淡入淡出动画

Question

这是 Owl Carousel 2 淡入淡出动画的示例:http://www.owlcarousel.owlgraphic.com/demos/animate.html

我想我已经包含了所有必需的 css 和 js 文件，这是我的代码:

/* ==============================================
    OWL CAROUSEL
=============================================== */
var $slides_nav = ( $('#slides').attr('data-direction') == 1 ) ? true : false;
var $slides_speed = $('#slides').attr('data-speed');

$("#slides ul").owlCarousel({
    navText: ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
    nav: $slides_nav,
    animateOut: 'fadeOut',
    items:1,
    margin:0,
    loop:true,
    autoplay:true,
    autoplayTimeout:8000,
    autoplayHoverPause:false,
    dots: false,
    stagePadding:0,
    smartSpeed:1000,

});

slider 有效，但幻灯片过渡不褪色..

你可以在我的website中看到

Answer 1

我发现了问题。我把它放在我的 css 中，这是页面中其他动画所必需的:

.animated {
    visibility:hidden;
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    -o-animation-delay: 0.3s;
    -ms-animation-delay: 0.3s;
}

这是导致问题的原因。我添加了下面的代码，现在可以使用了。

.owl-item.animated {
    visibility: visible;
}