reactjs - 未在生产中加载 GSAP 动画

Question

使用 Green sock 动画的 gatsby 插件制作的非常简单的 GSAP 动画，通过 react 加载一个 iframe 并使其淡入淡出。

当我在我的 firebase 应用程序上部署时，动画不再起作用。

当动画在本地完成时完美运行时，有什么可能的原因会阻止动画在部署时运行？

控制台中没有报告任何问题。而且我不知道如何在反应中正确使用事件断点。

import React, { Component } from "react";
import { TimelineLite, CSSPlugin } from "gsap/all";
import Iframe from 'react-iframe';
import F from "../land.module.scss";

import Button from "components/CustomButtons/Button.jsx";

thing component extension etc {

constructor(props){
        super(props);
        // container
    this.commentContainer = null;
    // tween
    this.Comments = null;
}

componentDidMount(){
// create tween


    this.Comments = new TimelineLite({ paused:true })

    // .to(this.commentContainer, 2, { x: 300 })
    // .to(this.commentContainer, 1, { rotation: 360, transformOrigin: "center" })
    .fromTo(this.commentContainer, {opacity: 0}, {opacity: 1, duration: 1});
    }


render()
return

<>
<button onClick={() => this.Comments.play()}>just the button</button>



    <div className={`${F.fb} col-12 mt-3`} ref={ this_ => this.commentContainer = this_ }>

<Iframe> ---- the iframe details etc URL, position, width height styles. 


export defaults. 

该代码可能无助于停滞，因为它在使用 gatsby develop 时在各个方面都能正常工作。

标签： reactjsfirebasegatsbyfirebase-hostinggsap