我使用的是anime JS库，我在一个div中添加了两个动画，第二个动画在第一个动画完成时开始。但问题是，我只想让第二个动画保持循环，我已经设置了属性"；循环；至"；真"；在第二个动画中，但它仍然不会循环，除了"；循环；属性，如何才能一次又一次地只进行第二个动画循环？
HTML代码：
<body>
<div></div>
</body>
CSS代码：
div{
height: 100px;
width: 100px;
background-color: rgb(161, 6, 6);
}
JavaScript代码：
"use strict";
let square = document.querySelector("div")
anime.timeline()
.add({
targets: square,
backgroundColor: "#3dbf7a",
duration: 2000,
})
.add({
targets: square,
translateX: [0,100],
translateY: [0,100],
duration: 1000,
loop: true,
})
如注释中所述，这是库中存在的问题。在这个解决方法中，我需要将anim.restart()调用放在setTimeout中，以确保javascript在新的事件循环中执行。
let square = document.querySelector("div");
anime.timeline()
.add({
targets: square,
backgroundColor: "#3dbf7a",
duration: 2000,
}).add({
targets: square,
translateX: [0, 100],
translateY: [0, 100],
duration: 1000,
changeComplete: anim => setTimeout(() => anim.restart())
});div {
height: 100px;
width: 100px;
background-color: rgb(161, 6, 6);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<div></div>jsFiddle