在javascript for循环中中断/延迟以一个接一个地运行css动画答案

【问题标题】：break/delay inside javascript for loops to run css animation one after another在javascript for循环中中断/延迟以一个接一个地运行css动画
【发布时间】：2018-11-28 16:08:05
【问题描述】：

为了解决我们的问题，我们将简要解释一下我们目前的情况：我们想在世界地图（svg 文件）中“闪现”各个国家。我们的函数接收一个带有国家 ID 的数组，而我们的 for 循环应该能够调用它们（显示为 CSS 动画）。根据控制台，数组确实正确通过（使用循环），并且动画正在运行。

然而，我们的问题是动画同时执行所有国家，而不是一个接一个地执行。我们已经在 for 循环内外尝试过 break、delay、setTimeout、setIntervall。不幸的是，没有任何效果。

有没有人可以帮助我们？

谢谢。

var htData = [
    ["DE", "00:00"],
    ["CO", "01:00"],
    ["US-3", "02:00"],
    ["IT", "03:00"]
];

function animateColor() {
  var j = -1;
  while(j < 3){
  j = getIds(j);
  console.log("animateColor: "+j);
  }
}

function getIds(elem) {
  for (var i = elem+1; i < htData.length; i++) {
    var htNow = htData[i][0];
    console.log("Daten For-Schleife: "+ htNow);
    $('#'+htNow).css({
        animation: "mymove 5s infinite"
      });
    return i;
  }
}

【问题讨论】：

“没有任何效果”不足以描述您的问题。
抱歉这个不正确的描述。我们的意思是这些功能没有解决我们的问题。（CSS 动画在所有国家/地区同时运行，但我们希望它一个接一个地运行）

标签： javascript arrays for-loop svg css-animations

【解决方案1】：

您需要为每个元素设置一个animation-delay。简而言之，它是列出的第二个时间值。

"01:00" 在 CSS 上下文中既不是有效的时间格式，也不是有用的时间格式。您需要 s 或 ms 单位标识符。但是，如果您想同时说明分钟和秒，让我们保留它。

infinite 表示动画永远重复。这不符合您“一个接一个地”运行它的要求。我知道您想为每个元素运行一次动画？

var htData = [
    ["DE", "00:00"],
    ["CO", "01:00"],
    ["US-3", "02:00"],
    ["IT", "03:00"]
];

function parse (str) {
    return parseInt(str, 10);
}

function setAnimation (datum) {
    var parts = datum[1].split(':').map(parse);
    var time = parts[0] * 60 + parts[1];
    $('#'+ datum[0]).css({
        animation: "mymove 5s " + time + "s"
    });
    // On every browser that understands CSS animations
    // you can avoid the use of jQuery with
    // document.querySelector('#'+ datum[0]).style.animation = "mymove 5s " + time + "s";
}

htData.forEach(setAnimation);

【讨论】：