javascript - GSAP 3+ 动画在 VueJS 项目中不起作用

Question

在我的本地服务器(http://localhost:8080/) GSAP 动画正常工作。每当我在 netlify.com 上推送 master 分支及其构建时，但动画不起作用。

我在组件上添加了代码并正确安装，但我无法理解为什么它在生产中不起作用!

CommonBanner.vue

<template>
  <div class="common-banner-area">
    <div class="container-fluid px-5-percent">
      <div ref="jsbannerimage" class="common-banner">
        <img class="img-fluid" :src="ImageUrl" alt="square">

        <div class="banner-content">
          <h1 ref="jstitle">{{BannerTitle}}</h1>
          <p ref="jssubtitle">{{BannerSubtitle}}</p>
        </div>

      </div>
    </div>
  </div>
</template>

<script lang="ts">
    import {Component, Vue, Prop} from 'vue-property-decorator';
    import {TimelineLite, Back} from 'gsap/all';

    @Component({
        name: 'CommonBanner',
        components: {},
    })
    export default class CommonBanner extends Vue {
        @Prop() public BannerTitle!: string;
        @Prop() public BannerSubtitle!: string;
        @Prop() public ImageUrl!: string;

        public mounted() {
            const {jstitle} = this.$refs;
            const {jssubtitle} = this.$refs;
            const {jsbannerimage} = this.$refs;
            const imagetimeline = new TimelineLite();
            imagetimeline.to(jsbannerimage, 0, {
                opacity: 0,
                ease: Back.easeInOut, // Specify an ease
            });
            imagetimeline.to(jsbannerimage, 2, {
                    opacity: 1
                },
                '+=0.5' // Run the animation 0.5s early
            );
            const timeline = new TimelineLite();

            timeline.to(jstitle, 0, {
                opacity: 0,
                ease: Back.easeInOut, // Specify an ease
            });
            timeline.to(jstitle, 2, {
                    opacity: 1
                },
                '+=1' // Run the animation 0.5s early
            );

            const subtimeline = new TimelineLite();
            subtimeline.to(jssubtitle, 0, {
                opacity: 0,
                ease: Back.easeInOut,
            });
            subtimeline.to(jssubtitle, 2, {
                    opacity: 1
                },
                '+=1.5' // Run the animation 0.5s early
            );


        }
    }
</script>

Answer 1

尝试加载 GSAP 的 UMD 版本。您可以这样说:

import { TimelineLite, Back } from "gsap/dist/gsap";

参见the GSAP's installation page了解更多信息。

话虽如此，我们建议使用 GSAP 3 格式，在这种情况下，您只需为提供的代码导入 gsap 即可。请参阅the GSAP 3 migration guide了解更多信息。