时间戳

首页 > 解决方案 > Fullpage.js - 如何只触发一次 onLeave 函数？

javascript - Fullpage.js - 如何只触发一次 onLeave 函数？

问题描述

我有一个页面，我正在使用 Fullpage.js onLeave 函数和 CSS 创建几个动画。

我的问题是当我离开第二部分时，第 3 部分的动画运行良好。但是当我滚动回第 2 节并再次进入第 3 节时，动画出现了错误 - 我试图让 onleave 函数只运行一次，然后保持类不变。

到目前为止，这是我的代码：

$(document).ready(function() {
  $('#fullpage').fullpage({
    //options here

    scrollOverflow:true,
    scrollingSpeed: 900,
    navigation: true,
    slidesNavigation: true,
  
      onLeave: function(origin, destination, direction){
      var loadedSection = this;
      
      //Section 2 Eigenschaften
      if(origin.index == 1 && direction == 'down'){
        
        //Gradient Hintergrund
        $(".gradientcircle").toggleClass("animate");
        
        //Eigenschaften Titel Opacity 1S Delay
        setTimeout(function(){
          $(".eigenschaften").toggleClass("animate1");
            }, 1000);
        
        //Eigenschaften Titel TranslateY 2S Delay
        setTimeout(function(){
          $(".eigenschaften").toggleClass("animate2");
            }, 2000);
      }
      
      //SECTION 3 KENNTNISSE
      if(origin.index == 2 && direction == 'down'){
        
        //White Circle Background
        $(".whitecircle").toggleClass("animate");
        
        //Grey Circle Background
        $(".greycircle").toggleClass("animate");
        
        //Gradient Hintergrund
        setTimeout(function(){
          $(".gradientcircle2").toggleClass("animate");
            }, 500);
        
        //KENNTNISSE TITEL
        setTimeout(function(){
          $(".kenntnisse-titel").toggleClass("animate");
            }, 1500);
        
        //KENNTNISSE SUBTITLE
        setTimeout(function(){
          $(".kenntnisse-subtitle").toggleClass("animate");
            }, 1750);
        
        //KENNTNISSE SHORTCODE
        setTimeout(function(){
          $(".kenntnisse-shortcode").toggleClass("animate");
            }, 2000);
       
      }
    }
 });
});

有人知道如何只触发一次 onLeave 函数吗？

提前致谢

标签： javascriptcssfullpage.js

解决方案

您可以使用标志来跟踪当前状态并了解动画是否已被触发。

就像是：

var numSections = 10;
var isAnimationFired = new Array(numSections).fill(false);

...

new fullpage('#fullpage', {
  onLeave: function(origin, destination, direction){

    // checking the flag to see if animation was fired for 
    // this destination section
    if(!isAnimationFired[destination.index]){
      if(destination.index === 1){
          // fire animation
          fireAnimationHere();
    
          isAnimationFired[destination.index] = true;
      }
    }
  }
});

推荐阅读