Question

我正在学习动画和JS，我决定使用anime.js。虽然当我尝试做一个基本功能时，我得到了一个＆＃34; Uncaught ReferenceError：动画没有定义＆＃34;错误。

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

尝试在正文结束之前加载两个脚本。它为我工作。希望对您也一样。

JavaScript不会检测动漫js

2 个答案: