GSAP ScrollTrigger在挂载时触发，而不是在滚动时触发

Question

我用一个与example in this codepen一致的滚动触发器制作了一个动画。

问题是，动画是在我加载页面时播放的，而不是当我滚动过预期的触发点时播放的。

有人知道为什么会这样吗？我在mounted中调用触发器方法，我认为这就是问题所在。但这就是codepen示例如何做到这一点，并且动画不会在页面加载时触发。调用方法中的方法应该只确定页面上有触发器。

我还从scrollTransition方法内部的this.animation()中删除了调用，因为我认为这可能会调用并触发动画。但是去掉括号会使滚动触发器标记(我猜是触发器本身)从屏幕上完全消失。

代码如下：

// HelloWorld.vue
<template>
  <div class="empty"></div>
  <div class="hello" ref="hello">
    // content
  </div>
  <div class="empty"></div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import { gsap, Power3 } from 'gsap';
  import { scrollTransition } from '../utils/transitions/scrollTransition';

  export default defineComponent({
    name: 'HelloWorld',
    props: {
      msg: String,
    },
    methods: {
      animation() {
        gsap.from(this.$refs.hello, {
          autoAlpha: 0,
          duration: 1.2,
          ease: Power3.easeOut,
          y: 400,
        });
      },
      scroll() {
        scrollTransition(this.$refs.hello, this.animation());
      },
    },
    mounted: function () {
      this.scroll();
    },
  });
</script>


// scrollTransition.ts
import { gsap } from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

export const scrollTransition = (
  trigger: HTMLElement,
  animation: gsap.core.Animation,
  props?: Object,
): gsap.plugins.ScrollTriggerInstance =>
  ScrollTrigger.create({
    trigger,
    animation,
    markers: true,
    start: 'top 50%',
    toggleActions: 'play complete none none',
    ...props,
  });

Answer 1

它被触发是因为我没有从我的animation()函数返回。

要修复它，您只需添加一条return语句。

animation() {
  return gsap.from(this.$refs.hello, {
    autoAlpha: 0,
    duration: 1.2,
    ease: Power3.easeOut,
    y: 400,
  });
},