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

Question

我在尝试重新启用scrollmagic控制器时遇到问题，如果之前已禁用它。

我想让徽标颜色更改仅在其视口较窄时触发（如果徽标在彩色区域中），而在其视口较宽时禁用。

但是，如果我再次调整窗口的大小以使其变窄，它将不会重新启用控制器。.我也尝试销毁并重置控制器，但是某种程度上，它将无法重新启用控制器...

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