如何解决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 举报,一经查实,本站将立刻删除。