我安装了所需的软件包，但 gsap "TimelineLite" 不工作/导入

如何解决我安装了所需的软件包，但 gsap "TimelineLite" 不工作/导入

    import Highway from "@dogstudio/highway";
    import { TimelineLite } from "gsap";

    class Fade extends Highway.Transition {
        in({ from,to,done }) {
            const tl = new TimelineLite();
            tl.fromTo(to,0.5,{ left: '-100%',top: '50%' },{ left: '0%' })
                .fromTo(to,{ height: '2vh' },{
                        height: "90vh",top: "10%",onComplete: function () {
                            from.remove();
                            done();
                        }
                    }
                )

                .fromTo(to.children[0],2,{ opacity: 0 },{ opacity: 1 });
        }
        out({ from,done }) {
            done();
        }
    }
    export default Fade;

由于某种原因，timelinelite 没有导入。我尝试重新安装，但它根本不起作用。

解决方法

您不再需要在 GSAP 的“新”v3 中导入 TweenLite、TweenMax、TimelineLite、TweenMax 或 CSSPlugin。

您需要做的就是使用他们的新语法导入 gsap

import { gsap } from "gsap";

所以你的代码应该是这样的：

import Highway from "@dogstudio/highway";
import { gsap } from "gsap";

class Fade extends Highway.Transition {
    in({ from,to,done }) {
        const tl = new gsap.timeline();
        tl.fromTo(to,0.5,{ left: '-100%',top: '50%' },{ left: '0%' })
            .fromTo(to,{ height: '2vh' },{
                    height: "90vh",top: "10%",onComplete: function () {
                        from.remove();
                        done();
                    }
                }
            )

            .fromTo(to.children[0],2,{ opacity: 0 },{ opacity: 1 });
    }
    out({ from,done }) {
        done();
    }
}
export default Fade;