在對象文字中禁用scrollmagic控制器es6

Question

我在嘗試重新啓用scrollmagic控制器（如果它之前已被禁用）時遇到問題。

我想有標誌的顏色變化，如果它只是引發了窄視（如果該標誌是在彩色區）和殘疾人如果wide..that至今工作

，但如果我調整窗口的大小再次縮小它不會重新啓用controller..i試圖破壞和復位控制器以及但不知何故，它不會重新啓用控制器...

codepen（使用GSAP和scrollmagic）： https://codepen.io/HendrikEng/pen/owyBYz?editors=0011

js：

const mobile = { 
    controller: new ScrollMagic.Controller(), 

    changeLogo: { 
    init:() => { 
     console.log("init tweens an scrollmagic"); 
     const tweens = { 
     enterOuter:() => { 
      TweenMax.fromTo(
      ".c-logo__outer", 
      1, 
      { fill: "#4dabfc" }, 
      { fill: "#fff" } 
     ); 
     }, 
     enterInner:() => { 
      TweenMax.fromTo(
      ".c-logo__inner", 
      1, 
      { fill: "#fff" }, 
      { fill: "#4dabfc" } 
     ); 
     }, 
     leaveOuter:() => { 
      TweenMax.fromTo(
      ".c-logo__outer", 
      1, 
      { fill: "#fff" }, 
      { fill: "#4dabfc" } 
     ); 
     }, 
     leaveInner:() => { 
      TweenMax.fromTo(
      ".c-logo__inner", 
      1, 
      { fill: "#4dabfc" }, 
      { fill: "#fff" } 
     ); 
     } 
     }; 
     const trigger = document.querySelectorAll(".js-change-logo"); 

     trigger.forEach(id => { 
     const scene = new ScrollMagic.Scene({ 
      triggerElement: id, 
      reverse: true, 
      triggerHook: 0.065, 
      duration: id.clientHeight 
     }) 
      .on("enter",() => { 
      tweens.enterOuter(); 
      tweens.enterInner(); 
      }) 
      .on("leave",() => { 
      tweens.leaveOuter(); 
      tweens.leaveInner(); 
      }) 
      .addIndicators() 
      .addTo(mobile.controller); 
     }); 
    }, 
    destroyTweens:() => { 
     console.log("kill tweens"); 
     TweenMax.killTweensOf(".c-logo__outer"); 
     TweenMax.killTweensOf(".c-logo__inner"); 
     TweenMax.set(".c-logo__outer", { clearProps: "all" }); 
     TweenMax.set(".c-logo__inner", { clearProps: "all" }); 
    } 
    } 
}; 

$(window).on("resize", function() { 
    var win = $(this); //this = window 
    if (win.width() <= 450) { 
    // reanble controller if disabledbed before - doesnt work 
    mobile.controller.enabled(true); 
    mobile.changeLogo.init(); 
    } else { 
    // disable scrollmagic controller 
    mobile.controller.enabled(false); 
    // destroy tweens 
    mobile.changeLogo.destroyTweens(); 
    } 
}).resize(); 

Answer 1

@hendrikeng我希望你不介意，但我更改了你的代碼。我發現自己最近需要多次做這件事，所以我基於自己的工作做了很多工作。

我認爲最大的問題是您在每個調整大小上運行了很多功能，而這些功能並不是非常高效，並且難以跟蹤已初始化和未完成的功能。我依賴於init_flag，所以它只能設置一次。

然後有更新的方法（如果需要調整大小的持續時間）和銷燬。

https://codepen.io/motionimaging/pen/848366af015cdf3a90de5fb395193502/?editors=0100

const mobile = { 

init_flag: false, 

init:() => { 

    $(window).on('resize', function(){ 

     const width = $(window).width(); 

     if(width <= 450){ 

      if(! mobile.init_flag){ 

       mobile.setup(); 

      } else { 

       mobile.update(); 
      } 

     } else { 

      if(mobile.init_flag){ 

       mobile.destroy(); 
      } 
     } 
    }); 
}, 

setup:() => { 

    mobile.init_flag = true; 

    mobile.triggers = document.querySelectorAll('.js-change-logo'); 

    const tweens = { 
     enterOuter:() => { 
      TweenMax.fromTo(
       '.c-logo__outer', 
       1, 
       { fill: '#4dabfc' }, 
       { fill: '#fff' } 
      ); 
     }, 
     enterInner:() => { 
      TweenMax.fromTo(
       '.c-logo__inner', 
       1, 
       { fill: '#fff' }, 
       { fill: '#4dabfc' } 
      ); 
     }, 
     leaveOuter:() => { 
      TweenMax.fromTo(
       '.c-logo__outer', 
       1, 
       { fill: '#fff' }, 
       { fill: '#4dabfc' } 
      ); 
     }, 
     leaveInner:() => { 
      TweenMax.fromTo(
       '.c-logo__inner', 
       1, 
       { fill: '#4dabfc' }, 
       { fill: '#fff' } 
      ); 
     } 
    }; 

    mobile.controller = new ScrollMagic.Controller(); 

    mobile.triggers.forEach(el => { 
     el.scene = new ScrollMagic.Scene({ 
      triggerElement: el, 
      reverse: true, 
      triggerHook: 0.065, 
      duration: el.clientHeight 
     }) 
     .on('enter',() => { 
      tweens.enterOuter(); 
      tweens.enterInner(); 
     }) 
     .on('leave',() => { 
      tweens.leaveOuter(); 
      tweens.leaveInner(); 
     }) 
     .addIndicators() 
     .addTo(mobile.controller); 
    }); 
}, 

update:() => { 

    if(mobile.init_flag){ 

     mobile.triggers.forEach(el => { 
      el.scene.duration(el.clientHeight); 
     }); 
    } 
}, 

destroy: function(){ 

    mobile.controller.destroy(true); 

    mobile.init_flag = false; 

    $('.c-logo > *').attr('style', ''); 
}, 
}; 
mobile.init();