anime.js 动画不工作，（动画没有启动）

Question

我刚开始 anime.js 并编写了这个基本代码，但它不起作用。

  <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <script src="//cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <script>
            var blue = anime({
                targets: '.blue',
                translateY: 200,
                autoplay: false
            });
    
            document.querySelector('.play-blue').onclick = blue.restart;
    
        </script>
        <style>
            .square {
                pointer-events: none;
                position: relative;
                width: 50px;
                height: 50px;
                background-color: cornflowerblue;
                margin: 4px;
                display: inline-block;
            }
    
            .blue {
                background: blue;
            }
    
            .controls {
                margin-top: 250px;
            }
        </style>
        <div id="anime-demo">
            <div class="square blue"></div>
    
        </div>
        <div class="controls">
            <button class="play-blue">Animate Blue</button>
    </body>
    
    </html>

我通过 npm 安装了动漫，当它不起作用时还包括 cdn（第 6 行）谁能告诉我哪里出错了..?

Answer 1

执行document.querySelector语句时你的元素不存在

将您的代码包装在加载事件侦听器中

我还建议您在按钮上使用 addEventListener

window.addEventListener("load", function() {
  var blue = anime({
    targets: '.blue',
    translateY: 200,
    autoplay: false
  });
  document.querySelector('.play-blue').addEventListener("click", blue.restart);
});

.square {
  pointer-events: none;
  position: relative;
  width: 50px;
  height: 50px;
  background-color: cornflowerblue;
  margin: 4px;
  display: inline-block;
}

.blue {
  background: blue;
}

.controls {
  margin-top: 250px;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>

<div id="anime-demo">
  <div class="square blue"></div>

</div>
<div class="controls">
  <button class="play-blue">Animate Blue</button>
</div>

当您需要更多控制时，您可以委派：

window.addEventListener("load", function() {
  document.querySelector('.controls').addEventListener("click", function(e) {
    const tgt = e.target;
    if (tgt.tagName ==="BUTTON") {
      ....
    }
  });
});

这是您可以研究的更通用的版本

const parms = {
  "blue": {
    targets: '.blue',
    translateY: 200,
    autoplay: false
  },
  "red": {
    targets: '.red',
    translateY: 400,
    autoplay: false
  }
}
const running = {}
window.addEventListener("load", function() {
  Object.keys(parms).forEach(key => {
    running[key] = anime(parms[key]); // save the object
    const but = document.querySelector('.play-' + key);
    but.dataset.running = key;
    but.addEventListener("click", function() {
      running[this.dataset.running].restart()
    });
  })
});

.square {
  pointer-events: none;
  position: relative;
  width: 50px;
  height: 50px;
  background-color: cornflowerblue;
  margin: 4px;
  display: inline-block;
}

.blue {
  background: blue;
}

.red {
  background: red;
}

.controls {
  margin-top: 250px;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>

<div id="anime-demo">
  <div class="square blue"></div>
  <div class="square red"></div>

</div>
<div class="controls">
  <button class="play-blue">Animate Blue</button>
  <button class="play-red">Animate Red</button>
</div>

anime.js 动画不工作，（动画没有启动）

anime.js animation not working, (the animation doesn't get initiated)

javascript

css-animations

web-animations

anime.js