我正在使用animate.js和fullpage.js。我的目标是在滚动离开某个部分时添加slideOutLeft动画,并在访问一个部分时添加slideInLeft动画。
我当前的代码删除了动画中的幻灯片并应用了幻灯片中的动画,但从未重新应用动画中的幻灯片。
$('#fullpage').fullpage({
afterLoad: function(anchorLink, index) {
$('.text').addClass('animated slideInLeft');
},
onLeave: function(index, nextIndex, direction) {
$('.text').removeClass('animated slideInLeft');
$('.text').addClass('animated slideOutLeft');
}
});
#first {
background-color: yellow;
}
#second {
background-color: blue;
}
.height {
height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.9/jquery.fullPage.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.9/jquery.fullPage.css" rel="stylesheet" />
<div id="fullpage">
<div class="section height" id="first">
<h2 class="text">Something1</h2>
</div>
<div class="section height" id="second">
<h2 class="text">Something2.</h2>
</div>
<div class="section height" id="third">
<h2 class="text">Something else </h2>
</div>
</div>
最佳答案
对于onLeave
,您必须使用离开部分来查找文本并在slideOutLeft
中应用onLeave
。还要记住,删除slideOutLeft
中的afterLoad
,文本可以再次将其滑出。
$('#fullpage').fullpage({
afterLoad: function(anchorLink, index) {
$(this).find('.text').removeClass('animated slideOutLeft');
$(this).find(".text").css("display","block");
$(this).find('.text').addClass('animated slideInLeft');
},
onLeave: function(index, nextIndex, direction) {
var leavingSection = $(this);
$(leavingSection).find(".text").removeClass('animated slideInLeft');
$(leavingSection).find(".text").addClass('animated slideOutLeft');
}
});
这是示例:
https://jsfiddle.net/39gadbnv/1/