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了解更多信息。