如何解决Vue-Router 和 Gsap ScrollTrigger
我在使用 vue-router 和 gsap 的 scrolltrigger 插件时遇到了一些问题。 我有一些使用 scroltrigger 的 vue 组件,当我转到另一个页面并返回到具有滚动触发器效果的页面时,它不会触发,但如果我手动刷新页面就可以工作。
我发现这个话题与使用 NuxtJs 的人有相同的问题,但 ScrollTrigger.disable() 和 ScrollTrigger.kill() 解决方案对我不起作用: https://greensock.com/forums/topic/24886-in-nuxt-when-using-scrolltriggerkill-how-can-it-run-again-when-page-is-viewed/
这是我用 ScrollTrigger 制作的一个组件:
模板部分
<template>
<section class="marquee">
<div class="marquee__inner" aria-hidden="true" ref="inner">
<div class="marquee__part">food wine fish beef vegetables</div>
<div class="marquee__part">food wine fish beef vegetables</div>
<div class="marquee__part">food wine fish beef vegetables</div>
<div class="marquee__part">food wine fish beef vegetables</div>
<div class="marquee__part">food wine fish beef vegetables</div>
</div>
</section>
</template>
脚本部分
<script>
import gsap from "gsap"
import ScrollTrigger from 'gsap/ScrollTrigger'
gsap.registerPlugin(ScrollTrigger)
export default {
name: 'ServicesMarquee',data() {
return {
currentScroll: 0,isScrollingDown: true,test: null,}
},methods: {
scrollAnim() {
gsap.to(this.$refs.inner,{
xPercent: -65,scrollTrigger: {
trigger: ".marquee",start: "top bottom",end: "top top",scrub: 0,}
})
},},mounted() {
gsap.set(this.$refs.inner,{xPercent: -50});
let tween = gsap.to(this.$refs.inner.querySelectorAll('.marquee__part'),{xPercent: -100,repeat: -1,duration: 10,ease: "linear"}).totalProgress(0.5);
let self = this
window.addEventListener("scroll",function(){
if ( window.pageYOffset > self.currentScroll ) {
self.isScrollingDown = true;
} else {
self.isScrollingDown = false;
}
gsap.to(tween,{
timeScale: self.isScrollingDown ? 1 : -1
});
self.currentScroll = window.pageYOffset
});
gsap.to(this.$refs.inner,{xPercent: -65 });
this.scrollAnim()
}
}
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。