我无法启动 animate.js

如何解决我无法启动 animate.js

我对此很陌生，无法弄清楚为什么动画不会触发。我将脚本源链接到anime.min.js，我可以在源面板中看到它。我什至尝试使用 cdnjs，但也没有用。

<!doctype html>
<html lang="en">
<head>
  <!-- required Meta tags -->
  <Meta charset="utf-8">
  <Meta name="viewport" content="width=device-width,initial-scale=1">
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <!-- jlondono Stylesheet -->
  <link rel="stylesheet" type="text/css" href="/css/stylesheet.css" media="screen"/>
</head>
<body>
  <div class="container mt-5">
    <div class="row">
      <div class="col-xs-12">
        <div class="bg-primary bluesquare" style="height: 150px; width: 150px;"></div>
      </div>
    </div>
  </div>
  <!-- Anime JS -->
  <script src="/script/anime.min.js"></script>
  <script>
  anime({
    targets: '.bluesquare',translatex: 250
  });
  </script>
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

  anime({
    targets: '.bluesquare',translatex: 250
  });

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://jlondono.me/script/anime.min.js"></script>
  <div class="container mt-5">
    <div class="row">
      <div class="col-xs-12">
        <div class="bg-primary bluesquare" style="height: 150px; width: 150px;"></div>
      </div>
    </div>
  </div>

解决方法

. 通常用于表示类选择器。

        <div **class**="bluesquare" class="bg-primary" style="height: 150px; width: 150px;"></div>

好的，在看了几个小时的 Youtube 和论坛后，结果证明这是两件事。

目标不正确（在我更改后，它仍然不起作用）
我没有将 translateX 中的“X”大写.....

OOF。谢谢大家

试试这个

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <!-- jlondono Stylesheet -->
</head>
<body>
  <div class="container mt-5">
    <div class="row">
      <div class="col-xs-12">
        <div class="bg-primary bluesquare" style="height: 150px; width: 150px;"></div>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <!-- Anime JS -->
  <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>
  
  anime({
  targets: '.bluesquare',width: '100%',// -> from '28px' to '100%',easing: 'easeInOutQuad',direction: 'alternate',loop: true
});
  </script>
</body>
</html>

在 Bootstrap.js 后添加文件

 <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- Anime JS -->
  <script src="/script/anime.min.js"></script>
  <script>
  anime({
    targets: '.bluesquare',translatex: 250
  });
  </script>
</body>
</html>