Vue-路由器和Gsap ScrollTrigger

Question

我有一些问题的vue-路由器和gsap的滚动触发器插件。我有一些使用scrol触发器的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>

Answer 1

我阅读了关于这一问题的所有文章，以及关于Stackoverflow和GSAP论坛的类似问题的文章，当然还有setTimeout工作，但这不是答案。

我还感到困惑的是，这个问题并没有影响到很多人，但他们描述的情况几乎相同，当vue +路由器+ gsap +滚动触发器在浏览页面(路由)时停止工作，然后返回到带有动画的前一个页面(在本例中，动画不起作用)。

所以，伙计们，首先看看<transition>在<router-view>上面。当您同时拥有来自上一页和下一页的组件时，并且ScrollTrigger计算该时间的值(offsetTop)，这就是问题所在。