时间戳

首页 > 解决方案 > 即使我有库，我的动画代码也无法在 Visual Studio Code 中运行

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

问题描述

我正在尝试使用显示动画为我的学校网页制作动画，但事情并没有达到应有的效果，就像我试图在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"
})

尝试了我能做的一切，但仍然无法正常工作，请帮助！！！

标签： javascriptcssanime.js

解决方案

只需删除您当前的 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>

推荐阅读