时间戳

首页 > 解决方案 > 如何让 JS 文件使用 GSAP 为代码设置动画？

javascript - 如何让 JS 文件使用 GSAP 为代码设置动画？

问题描述

我是 js 编码新手，正在尝试使用 GSAP 为一些代码设置动画。我不能让任何东西移动或做任何功能。编译文件时没有任何错误。此外，我无法在我的 CodePen 上制作任何动画，我一直在尝试使用它来查看是否可以尝试做任何可能有效的事情。我的 html 和 css 工作正常。我不知道可能是什么问题？

代码笔：

https://codepen.io/ashleynw1800/pen/VwaRGBX

HTML：

<!-- Font Awesome-->
    <script src="https://kit.fontawesome.com/3c79b583ac.js" crossorigin="anonymous"></script>
    <!-- Google Fonts-->
    <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet">

<section class="section-1">
    <div id="hello-container">
        <h1 class="hello"> hello!</h1>
    </div>

    <div id="happy-container">
        <i class="fa fa-smile-o" aria-hidden="true"></i>
    </div>
</section>

CSS：

/* =============
    Demo
============= */

.section-1{
    display: grid;
    grid-template-areas: ". hello happy .";
    grid-template-columns: "auto 2fr 1fr auto";
    background-color: #E6EBFF;
}

#hello-container{
    grid-area: hello;
    align-self: center;
}
.hello{
    font-size: 150px;
    font-family: 'Abril Fatface', cursive;
    color: #FF4F2D;
}

#happy-container{
    grid-area: happy;
    align-self: center;
    color: #FF89FF;
    font-size: 150px;
}

JS（除了一条基本线外，我已经全力以赴，试图让任何事情发挥作用）：

import {gsap} from "gsap";

gsap.to(".hello", {duration:2, alpha:0})

标签： javascriptgsap

解决方案

“你的错误” ==> 模块想法/概念的错误实现：

要从中导入的模块。这通常是包含模块的 .js 文件的相对或绝对路径名。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#:~:text=To%20dynamically%20import%20a%20module,js')%20。

由CDN（Codepen）安装。删除 import {gsap} from "gsap";，代码将正常工作。否则，您会收到此错误：

未捕获的类型错误：无法解析模块说明符“gsap”

通常，检查代码并检查控制台错误非常有用。 https://developers.google.com/web/tools/chrome-devtools/console

相关文章：

无法解析模块说明符 https://medium.com/@samichkhachkhi/failed-to-resolve-module-specifier-23fae20222df

使用模块教程加载 GSAP：

https://greensock.com/docs/v3/Installation#npm

推荐阅读