[英]Having trouble removing and adding a class with fullpage.js
I'm using animate.js and fullpage.js.我正在使用 animate.js 和 fullpage.js。 My goal is to add a slideOutLeft animation when scrolling away from a section, and to add a slideInLeft animation when visiting a section.
我的目标是在滚动离开某个部分时添加一个 slideOutLeft 动画,并在访问一个部分时添加一个 slideInLeft 动画。
My current code removes the slide in animation and applies the slide out animation, but never reapplies the slide in animation.我当前的代码删除动画中的幻灯片并应用滑出动画,但从不重新应用动画中的幻灯片。
$('#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>
For the onLeave
, you must use the leaving section to find the text and apply the slideOutLeft
in onLeave
.对于
onLeave
,您必须使用离开部分来查找文本并在slideOutLeft
中应用onLeave
。 Also remember that remove the slideOutLeft
in afterLoad
which the text can slide it out again.还要记住在
afterLoad
中删除slideOutLeft
,文本可以再次将其滑出。
$('#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');
}
});
Here is the example: https://jsfiddle.net/39gadbnv/1/这是示例: https : //jsfiddle.net/39gadbnv/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.