我无法让 animate.js 启动

Question

我对此很陌生，无法弄清楚为什么动画不会触发。我将脚本源链接到 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>

Answer 1

一个.通常用来表示一个class选择器。

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

Answer 2

在 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>

Answer 3

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

目标不正确（改了之后还是不行）
我没有将 translateX 中的“X”大写.....

太棒了。谢谢大家

Answer 4

试试这个

<!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>

我无法让 animate.js 启动

I cannot get animate.js to initiate

javascript

html

anime.js