ScrollMagic 在程序代码中滞后但在代码笔中没有？

问题描述

我有一个在滚动时会展开的 div，代码在 Visual Studios 代码和 codepen 中都完成了它需要做的事情。然而，无论出于何种原因，codepen 中的“动画/增长”比 Visual Studios 代码中的更流畅（使用实时服务器） - 我真的无法弄清楚这背后的原因是什么。

TweenLite.defaultEase = Linear.easeNone;
        var enlargeController = new ScrollMagic.Controller();
        var enlargeTween = TweenMax.to(".off-grid-section-grow",0.5,{width: '100%',height: '1000px'});
        var tlEnlarge = new TimelineMax();
        var enlargeScene = new ScrollMagic.Scene({triggerElement: ".off-grid-section-grow",duration: "100%",triggerHook: 0.65})
                    .setTween(enlargeTween)
                    .addTo(enlargeController);

.spacer {
  width: 100vw;
  height: 800px;
}
.off-grid-section-grow {
        height: 300px;
        width: 30%;
        margin: auto;
        background-color: orangered;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

.spacer2 {
  width: 100vw;
  height: 800px;
}

<div class="spacer"></div>
<div class="off-grid-section-grow"></div>
<!--ScrollMagic Plugin(s)-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addindicators.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>

<div class="spacer2"></div>

从上面的代码笔中可以看出，动画按预期工作。但是，如下所示，它非常明显（在 VS CODE 中）。

请记住，下面的 gif 仅以 28FPS 的速度运行 - 然而，尽管如此，动画仍然非常滞后。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html javascript jquery scrollmagic