在owl-carousell幻灯片上添加自定义动画

Question

我已成功在owl carousel上添加了自定义 in 动画，但是找不到正确的事件或添加幻灯片 out 动画的方法。

有什么想法或想法吗？

---

以下是自定义动画：

var owl = $('.custom1').owlCarousel({
    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;
    $('.m, .c', el).addClass('slideInRight animated')
            .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
                $('.m, .c', el).removeClass('slideInRight animated');
            });
        });

#demos .owl-carousel .item {
  padding: 0 !important;
  display: flex;
  background: none !important;
}

.m-wrapper,
.c-wrapper,
.m,
.c {
  display: block;
  height: 100%;
  overflow: hidden;
}

.m-wrapper,
.c-wrapper {
  width: 50%
}

.m1 {
  background: blue;
}

.m2 {
  background: red;
}

.m3 {
  background: yellow;
}

.c {
  padding: 1rem;
  background: #4DC7A0;
}

<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"><div class="m-wrapper"><div class="m m1"></div></div><div class="c-wrapper"><div class="c"><h4>1</h4></div></div>
  </div><div class="item"><div class="m-wrapper"><div class="m m2"></div></div><div class="c-wrapper"><div class="c"><h4>2</h4></div></div>
  </div><div class="item"><div class="m-wrapper"><div class="m m3"></div></div><div class="c-wrapper"><div class="c"><h4>3</h4></div></div>
  </div>
</div>
</section>

我的目标是添加一个slideOutLeft动画，以便媒体（.m）和内容（.c）元素向左平滑滑出。 events和translate.owl.carousel一样，但似乎它们在正确的时间开火。