猫头鹰旋转木马 2 无法使淡入淡出动画正常工作

Question

下面是猫头鹰旋转木马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,
});

滑块工作，但幻灯片转换不会褪色。。

你可以在我的网站上看到

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;
}