Question

如何使用owlCarousel幻灯片使用选定的css动画为每个内容图层设置动画？

这就是我的所作所为，但我无法使其正常运作。

HTML

<div class="owl-carousel owl-theme">
    <div class="slide-item-1">
        <div class="layer layer1">
            <div data-animate="animated fadeInLeft">
                <h1>I'm layer 1</h1>
            </div>
        </div>
        <div class="layer layer2">
            <div data-animate="animated fadeInLeft">
                <h2>I'm layer 2</h2>
            </div>  
        </div>
    </div>

    <div class="slide-item-2">
        <div class="layer layer1">
            <div data-animate="animated fadeInLeft">
                <h1>I'm layer 1</h1>
            </div>
        </div>
        <div class="layer layer2">
            <div data-animate="animated fadeInLeft">
                <h2>I'm layer 2</h2>
            </div>
        </div>
        <div class="layer layer3">
            <div data-animate="animated fadeInLeft">
                <h2>I'm layer 3</h2>
            </div>  
        </div>
    </div>
</div>

的JavaScript

 jQuery(document).ready(function($) {
    $('.owl-carousel').owlCarousel({
        items:1,
        dots: true,
        nav: false,
        animateOut: 'fadeOutLeft',
        animateIn: 'fadeInRight',
        autoplay:true,
        onTranslated: animateSlide,
        onTranslate: removeAnimation
    });

    function removeAnimation() {
        var item = $(".owl-item .layer");
        item.removeClass(item.children().data('animate'));
    }

    function animateSlide() {
        var item = $(".owl-item.active .layer");
        item.addClass(item.children().data('animate'));
    }
});

现在我有这个问题，

它首先显示内容然后显示动画，我的意思是内容不附带动画，首先是动画。
第一张幻灯片'图层'DIV内容不会在第一个视图中为内容制作动画，但在从其他幻灯片返回后效果不错。
上一张幻灯片'图层'DIV内容动画适用于首次观看，但下次无效。我可以看到它是添加双动画或不滑动后移动动画类。
中间幻灯片工作正常，没有任何问题。

Answer 1

您可以将events动画绑定到猫头鹰传送带的animate.css上。

在示例中，我使用了change.owl.carousel事件：

change.owl.carousel

类型：attachable
  回调：onChange
  参数：property
  当属性要更改其值时。

该函数本身会添加动画类（addClass()），并在触发动画结束后（one(...)后跟removeClass()）再次将其删除。

var owl = $('.custom1').owlCarousel({
    animateOut: 'slideOutDown',
    animateIn: 'flipInX',
    items:1,
    margin:30,
    stagePadding:30,
    smartSpeed:450,
    loop: true,
    dots: true,
    autoplay: true,
});

owl.on('change.owl.carousel', function (event) {
    var el = event.target;
    $('h4', el).addClass('slideInRight animated')
            .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
                $('h4', el).removeClass('slideInRight animated');
            });
        });

<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/animate.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<section id="demos">
<div class="custom1 owl-carousel owl-theme">
  <div class="item"><h4>1</h4>
  </div><div class="item"><h4>2</h4>
  </div><div class="item"><h4>3</h4>
  </div><div class="item"><h4>4</h4>
  </div><div class="item"><h4>5</h4>
  </div><div class="item"><h4>6</h4>
  </div>
</div>
</section>

如何在owlCarousel滑块内容上添加动画

1 个答案:

change.owl.carousel