即使我有库，我的动画代码也无法在 Visual Studio Code 中运行答案

【问题标题】：My anime code is not working in Visual Studio Code even though I have the library即使我有库，我的动画代码也无法在 Visual Studio Code 中运行
【发布时间】：2020-10-23 18:31:30
【问题描述】：

我正在尝试使用具有启发性的动画为我的学校网页制作动画，但事情并没有达到应有的效果，就像我尝试在anime.js 库中调用一样，我将文件下载到我的工作区，但它仍然没有弄清楚它应该是怎样的，这里是 HTML 代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Test animation</title>
    <link rel="stylesheet" href="style.css">
    <script src="index.js"></script>
    <script src="libs/anime.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="text-animation">
        Welcome to our School Enterprising Group website!
    </div>
</body>

</html>

CSS 代码：

body {
    margin: 0px;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: green;
}

.text-animation {
    color: lightblue;
    font-size: 50px;
    font-family: "Passion One", sans-serif;
    letter-spacing: 1px;
}

.text-animation, .letter {
    display: inline-block;
}

最后是 JavaScript 代码

var element = document.getElementsByClassName("text-animation")[0];

//Replace each char with <span class="letter">{char} </span>

element.innerHTML = element.textContent.replace(/\S/g, '<span class="letter">$&</span>');

anime.timeline({loop: true})
.add({
    targets: ".text-animation .letter",
    scale: [3,1],
    opacity: [0,1],
    translateZ: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: (elem, index) => index*70,
})

.add({
    targets: ".text-animation",
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo"
})

尝试了我能做的所有事情但仍然无法正常工作，请帮助！！！

【问题讨论】：

anime.js 文件是否存在于libs 目录中？在 Bootstrap 依赖项之后移动你的 JS 脚本声明会有帮助吗？请考虑提供minimal reproducible example，以便我们帮助解决问题。
没有.letter类的HTML元素
我只是作为参考类使用

标签： javascript css anime.js

【解决方案1】：

Add the scripts inside the body tag like this and see if it works. 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Test animation</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="text-animation">
        Welcome to our School Enterprising Group website!
    </div>

<script src="index.js"></script>
    <script src="libs/anime.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

【讨论】：

不，这样做了，但仍然没有发生任何事情，只是仍然像石头一样的旧网页

【解决方案2】：

只需删除您当前的 HTML 文件并复制粘贴下面的给定代码即可。它会起作用的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Test-Animation</title>
</head>
<body>
    <div class="text-animation">
        Welcome to our School Enterprising Group wesite!
    </div>

</body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="index.js"></script>
</html>

【讨论】：