0

我根据这个 codepen 中的示例制作了一个带有滚动触发器的动画。

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

有谁知道为什么会这样？我将触发方法称为 in mounted，我认为这就是问题所在。但这就是 codepen 示例的方式，并且动画没有在页面加载时触发。在方法中调用方法应该只确定页面上有触发器。

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

这是代码：

// 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,
  });
4

1 回答 1

0

它正在触发，因为我没有从我的animation()函数中返回。

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

animation() {
  return gsap.from(this.$refs.hello, {
    autoAlpha: 0,
    duration: 1.2,
    ease: Power3.easeOut,
    y: 400,
  });
},
于 2021-03-06T16:44:26.223 回答