无法使用动漫js

问题描述

我通过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
});

解决方法

根据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>

anime.js html javascript