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 (将#修改为@）