标题上的旋转木马过渡动画

在这个演示中，当标题出现时，您可以看到带有转换效果的旋转木马。问题是，当标题消失时，这些转换也会发生，因此即使标题不在中心旋转木马上，也有很长的延迟时间可以看到标题。有办法防止这种情况发生吗？

    <!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; }

并将<script>中的setTimeout()从500 降低到100

setTimeout(function(){... }, 100)

演示

你可以用CSS来修复它，但它去除了很好的淡出效果。

更新的演示：http://plnkr.co/edit/wWhk2fe95oOIvLHzbsu1?p=preview

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

相关内容

最新更新

热门标签：