文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在owlCarousel滑块内容上添加动画

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

Stack Overflow用户

提问于 2017-03-23 07:11:25

回答 1查看 7K关注 0票数 4

如何用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内容动画工作在第一次视图，但下一次不工作。我能看到的是，它添加双动画，或不删除动画类后，幻灯片到另一个。
中间幻灯片运行良好，没有任何问题。

jquery

html

owl-carousel

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-03-18 14:12:25

owl有不同的事件，您可以将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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42969419

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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