无法使用动漫js答案

【问题标题】：Unable to use anime js无法使用动漫js
【发布时间】：2021-05-02 10:15:23
【问题描述】：

我通过npm安装了anime js，并按照github上的所有步骤，但是文本没有动画

这是我的 HTML 和 JS 代码

HTML：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    
    <link rel="stylesheet" href="app.css">
    <title>Anime Demo</title>
</head>
<body>
    <script src="index.js"></script>
    <script src="node_modules/animejs/lib/anime.min.js"></script>
    <div><h1>This is a header!!</h1></div>
</body>
</html>

JS：

let anime = require('animejs')
let div = document.querySelectorAll('div')
anime({
    targets: div,
    translateX: 250,
    rotate: '1turn',
    backgroundColor: '#FFF',
    duration: 800
});

【问题讨论】：

为什么是document.querySelectorAll('div')？ console.log 并测试它返回的内容

标签： javascript html anime.js

【解决方案1】：

根据targets的文档，它需要是一个选择器，即String。

所以你的代码应该是：

anime({
  targets: 'div',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#FFF',
  duration: 800
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<div>
  <h1>This is a header!!</h1>
</div>

【讨论】：