Question

在这个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>

Answer 1

你可以用CSS修复它，但它会消除那种漂亮的淡出效果。

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

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

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

Answer 2

在你的CSS中更改以下内容，

.slide h1 {... transition: opacity 1s, visibility 1s; }到
.slide h1 {... transition: opacity 1s ease-in; }

将setTimeout()中的<script>从500减少到100

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

Demo

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

2 个答案: