JavaScript 未检测到动漫 js

Question

我正在学习动画和 JS，我决定与 anime.js 一起学习。虽然当我尝试执行基本功能时出现 "Uncaught ReferenceError: anime is not defined" 错误。

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Underscores</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <script src="backend.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"></script>

  <div class="box red"></div>
  <div class="box blue"></div>
  <div class="box green"></div>
  <div class="box yellow"></div>
</body>
</html>

CSS:

.box{
  position: relative;
  width: 100px;
  height: 100px;
  margin: 4px;
  display: inline-block;

}

.red{background-color: red;}

.blue{background-color: blue;}

.green{background-color: green;}

.yellow{background-color: yellow;}

JS:

anime({
   targets: 'div.box.red',
   translateY: [
     { value: 200, duration: 500 },
     { value: 0, duration: 800 }
   ],
   rotate:{
     value: '1turn',
     easing: 'easeInOutSine'
   }
});

Answer 1

正如 CertainPerformance 所说，anime.js 的依赖必须在使用它的 backend.js 之前声明。像这样：

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"></script>
<script src="backend.js" charset="utf-8"></script>

希望这些说明能解决您的问题！

Answer 2

尝试在正文结束之前加载这两个脚本。它对我有用。希望它对你也一样。

Answer 3

我尝试了不同的方法，包括建议我下载 zip 文件并尝试使用它，但它告诉我未定义 <script src="JavaScript/anime-master/lib/anime.es.js"></script><script src ="JavaScript/userform.js"></script> 我也尝试过 <script src="https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js"></script> 但仍然告诉我未定义

在我的 Javascript 文件中，我正在尝试像这样使用动画anime({ targets: '#RegistrationForm', translatex: 250 }); 我也尝试使用变量，并且 class 我正在尝试为表单制作动画<form method="POST" action="RegistrationSend.php" id="RegistrationForm" > <div class="card d-flex justify-content-center" style= "width: 30rem;"> <div class="card-body"> 我也试过 card-body class 但仍然没有成功，它总是告诉我动漫没有定义。有什么建议吗？

JavaScript 未检测到动漫 js

JavaScript does not detect anime js

javascript

html

css

animation

anime.js