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

【问题标题】：Fullpage.js - How do I trigger the onLeave function only once?Fullpage.js - 如何只触发一次 onLeave 函数？
【发布时间】：2021-06-22 11:24:23
【问题描述】：

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

我的问题是当我离开第二部分时，第三部分的动画运行良好。但是当我滚动回第 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 函数吗？

提前致谢

【问题讨论】：

标签： javascript css fullpage.js

【解决方案1】：

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

类似：

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;
      }
    }
  }
});

【讨论】：