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

问题描述

我有一个页面，我在其中使用 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 函数吗？

提前致谢

解决方法

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

类似于：

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