michel lompret michel lompret - 7 months ago 167
Javascript Question

carousel transition animation on title

In this demo you can see the carousel with the transition effect on the title when it appears. The problem is that these transition also take place when the title disappear so there's so delay time where you can see a title even if it's not on the center carousel. Is there a way to prevent that?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />

<title>Owl Test with Custom Nav</title>

<link rel="stylesheet" href="owl.carousel.min.css" />

<style type="text/css" media="screen">
* { padding: 0; margin: 0; outline: 0; box-sizing: border-box; }

html,
body,
.slider,
.owl-carousel,
.owl-stage-outer,
.owl-stage,
.owl-item,
.slide { height: 100%; overflow: hidden; }

.slide { position: relative; }
.slide h1 { opacity: 0; visibility: hidden; font-family: monospace; font-size: 3em; line-height: 1; color: #000; text-align: center; position: absolute; top: 50%; left: 0; right: 0; margin-top: -1.5em; }
.slide h1 {
-webkit-transition: opacity 1s, visibility 1s;
transition: opacity 1s, visibility 1s;
}
.animate .slide h1 { opacity: 1; visibility: visible; }

.slide1 { background-color: chocolate; }
.slide2 { background-color: coral; }
.slide3 { background-color: crimson; }

.slider .owl-item { -webkit-backface-visibility: visible; backface-visibility: visible; }

</style>
</head>
<body>
<div class="slider">
<div class="owl-carousel">
<div class="slide slide1">
<h1>Slide 1</h1>
</div><!-- /.slide slide1 -->

<div class="slide slide2">
<h1>Slide 2</h1>
</div><!-- /.slide slide2 -->

<div class="slide slide3">
<h1>Slide 3</h1>
</div><!-- /.slide slide3 -->
</div><!-- /.owl-carousel -->

</div><!-- /.slider -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="owl.carousel.min.js"></script>

<script>
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
center:true,
items: 2,
loop: true,
autoplay: true,
onChanged: function (event) {
setTimeout(function(){
$('.slider').find('.center').addClass('animate').siblings().removeClass('animate')
}, 500);
}

});
});
</script>
</body>
</html>

Answer

You could fix it with CSS, but it removes that nice fade out effect.

Updated demo: http://plnkr.co/edit/wWhk2fe95oOIvLHzbsu1?p=preview

.owl-item.animate h1 {
  display:none;
}

.owl-item.center h1 {
  display:block;
}
Comments