【发布时间】：2018-07-06 10:13:22
【问题描述】：
编辑：我发现问题出在哪里，当slide设置为loop: true时，会显示元素滑动两次的效果。如何在不将循环设置为 false 的情况下解决此问题？
--
我在 animate.css 旁边使用 swiper 滑块来为幻灯片中的某些元素设置动画。我试图让一个特定的元素从右侧滑入（slideInRight）。
为此，我最初将元素的visibility 设置为hidden，然后将动画类添加到元素并在setTimeout 方法中将可见性设置为可见。
它可以工作，但是有一个小错误，效果中的幻灯片看起来像是经历了 2 个周期。它应该从右侧无缝滑入并落入其位置。要查看实际效果，请运行以下代码：
$(document).ready(function() {
var swiper = new Swiper('.swiper-container', {
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
}
});
var swiper = document.querySelector('.swiper-container').swiper;
setTimeout(function() {
$('.slide-container').css({
'visibility': 'visible',
'opacity': '1'
}).addClass('animated slideInRight animate-duration-100');
}, 1000);
setTimeout(function() {
$('.sy-title').css({
'visibility': 'visible'
}).addClass('animated slideInRight');
}, 1600);
});body {
background: #3E3E3E;
}
.swiper-container {
max-width: 300px;
}
.slide-container {
opacity: 0;
transition: 2s ease-in-out;
visibility: hidden;
}
.img-fluid {
max-width: 100%;
}
span.sy-title {
display: block;
color: #fff;
font-weight: bold;
visibility: hidden;
font-size: 15px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slide-container">
<div class="img-container-1">
<img class="img-fluid" src="http://placehold.it/500x300?text=slide1">
</div>
<div class="sy-info">
<span class="sy-title">WATCH THIS TEXT ANIMATION</span>
</div>
<div class="img-container-2">
<img class="img-fluid" src="http://placehold.it/500x300?text=slide1">
</div>
<div class="sy-availability">
<span class="sy-title">WATCH THIS TEXT ANIMATION</span>
<div class="img-container-3">
<img class="img-fluid" src="http://placehold.it/500x300?text=slide1">
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="slide-container">
<div class="img-container-1">
<img class="img-fluid" src="http://placehold.it/500x300?text=slide2">
</div>
<div class="sy-info">
<span class="sy-title">WATCH THIS TEXT ANIMATION</span>
</div>
<div class="img-container-2">
<img class="img-fluid" src="http://placehold.it/500x300?text=slide2">
</div>
<div class="sy-availability">
<span class="sy-title">WATCH THIS TEXT ANIMATION</span>
<div class="img-container-3">
<img class="img-fluid" src="http://placehold.it/500x300?text=slide2">
</div>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>【问题讨论】：
标签： javascript jquery swiper animate.css