javascript - Owl Carousel 幻灯片中的元素在 css 动画发生之前显示

Question

owl-carousel 幻灯片中的元素在动画开始之前显示(fadeInUp 和 zoomIn)。它们不应该在动画之前可见。在第一张幻灯片中它们表现良好，但在第二张幻灯片中，您可以看到它们总是在 css 动画发生之前出现。

检查这个 fiddle :https://jsfiddle.net/6k8agot1/

//Start Hero slider initialize code
$(document).ready(function(){
var heroSlider = $('.owl-carousel');
heroSlider.owlCarousel({
animateOut: 'fadeOut',
animateIn: 'fadeIn',
autoplayTimeout:5000,
autoplayHoverPause: true,

loop: true,
margin: 0,
nav: false,
mouseDrag:false,
touchDrag:true,
pullDrag:false,
freeDrag:false,
dots:true,
autoplay:true,
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1
}
}
});
// End Hero slider initialize code
// Start Reactivate css animation every time a slide is loaded
heroSlider.on("changed.owl.carousel", function(event){
// selecting the current active item
var item = event.item.index-2;
// first removing animation for all captions
$('h1, p').removeClass('fadeInUp');
$('a').removeClass('zoomIn');
$('.owl-item').not('.cloned').eq(item).find('h1, p').addClass(' fadeInUp');
$('.owl-item').not('.cloned').eq(item).find('a').addClass(' zoomIn');


})
});

/*Start buttons*/
.btn.btn-default {
display: inline-block;
border:none;
color: #fff;
padding:15px;
border-radius: 38px;
position: relative;
background-color: #4ac8ed;
z-index: 1;

}
.btn.btn-default:after {
position: absolute;
border:none;
content: '';
top: 0;
color:white;
left: 0;
width: 100%;
height: 100%;
border-radius: 38px;
background:#2f7c93;
transition: opacity 0.3s ease-out;
z-index: 2;
opacity: 0;
}
.btn.btn-default:hover:after {
opacity: 1;
}
.btn.btn-default i {
-webkit-transition: .5s; /* For Safari 3.1 to 6.0 */
transition:  .3s ease;
position:relative;
padding:0;
margin:0;
vertical-align: middle;
}
.btn.btn-default:hover i {
transform: translateX(5px);
}
.btn.btn-default b, i, span {
position: relative;
z-index: 3;
}
/*End buttons*/



.owl-theme .owl-dots .owl-dot:focus {
outline: none!important;
}
.owl-carousel .owl-item img {
pointer-events: none;
}
.padding_zero {overflow:hidden;  }
.centered {
position: absolute;
margin-top:-250px;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.centered span { font-weight:700;}

 .fadeInUp {
animation-duration: .8s!important;
animation-delay: .8s;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

 to {
    opacity: 1;
  }
}

.zoomIn {
  animation-name: zoomIn;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);

  }

  to {
    opacity: 1;
    transform: none;
  }
}



.fadeInUp {
  animation-name: fadeInUp;
}


.it1 .zoomIn {
animation-duration: .8s!important;
animation-delay: 1.2s;
}

.it2 .zoomIn {
animation-duration: .8s!important;
animation-delay: 1s;
}
.item1 b { font-size:14px; font-weight:300;}
.item1 h1 {font-size:65px; line-height: 65px;}
.item1 p {font-size: 20px; }

.item2  h1 {font-size: 65px; }
.item2  p { font-size:20px; }
.item2  b {font-size:14px; font-weight:300;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid padding_zero ">
    <div class="row justify-content-center ">
      
      <div class="col-12  col-md-12 ">
        
        <div class="owl-carousel owl-theme ">
          <!-- SLIDE 1 -->
          <div class="item " >
            <img src="http://divcake.com/temp2/images/forest1.jpg" alt="" >
            <div class="centered centered1 col-10 col-md-6 col-lg-4  text-center item1 text-white">
              <h1 class="animated fadeInUp mr-0  ">Start your project with us!</h1>
              <p class="fadeInUp my-1 my-md-4 animated "> - Make your great ideas become reality - <br>We have the solution</p>
              
              <div class="it1">
                <a href="index.php" class="btn btn-default px-3 py-1 px-md-4 py-md-2 zoomIn  animated"><b> START PROJECT</b> <i class="fas fa-caret-right "></i></a>
              </div>
            </div>
          </div>


          <!-- SLIDE 2 -->
          <div class="item  ">
            <img  src="http://divcake.com/temp2/images/proba2.jpg"   alt="" >
            <div class="centered text-center col-10 col-md-6 item2 text-dark ">
              <p class="mb-3 " >Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
              <h1 >Lorem2 ipsum dolor.</h1>
               <div class="it2">
                <a href="contact.php" class="btn btn-default px-3 py-1 px-md-4 py-md-2 "><b>CONTACT</b> <i class="fas fa-caret-right "></i></a>
              </div>
            </div>
          </div>
          
        </div>
        
      </div>
    </div>
  </div>

Answer 1

出现您的问题是因为您是在幻灯片转换完成后进行更改。使用“翻译”事件而不是“更改”应该会有所帮助。

尝试改变

heroSlider.on("改变.owl.carousel", function(event){});

到

heroSlider.on("翻译.owl.carousel", function(event){});

同时保持 Owl Carousel 元素中的类一致，第二个轮播元素子项中缺少动画类。

<h1 class="animated mr-0"></h1>
<p class="my-1 my-md-4 animated"></p>
<a class=" animated"></a>