为什么循环属性对我的第二个动画不起作用？

问题描述

我正在使用动画 JS 库，我向一个 div 添加了两个动画，第二个动画在第一个动画完成时开始。但问题是我只想让第二个动画保持循环，我已经在第二个动画上将属性“loop”设置为“true”，但它仍然不会循环，除了“loop”之外的每个属性都可以正常工作属性，我怎样才能一遍又一遍地制作第二个动画循环？

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,duration: 1000,loop: true,})

解决方法

正如评论中提到的，这是库中的 an existing issue。在这个解决方法中，我需要将 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,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

anime.js html javascript