在此demo出现的时候可以在标题上看到带有转场效果的轮播。问题是这些过渡也会在标题消失时发生，所以即使标题不在中央转盘上，您也可以看到标题的延迟时间。有没有办法防止这种情况发生？
<!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>
最佳答案
改变你的CSS，
.slide h1 {... transition: opacity 1s, visibility 1s; }到
.slide h1 {... transition: opacity 1s ease-in; }
并减少 setTimeout()在<script>从 500 到 100
setTimeout(function(){... }, 100)
关于jquery - 标题上的轮播过渡动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36683575/