时间戳

首页 > 解决方案 > 在javascript for循环中中断/延迟以一个接一个地运行css动画

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

问题描述

为了解决我们的问题，我们将简要解释一下我们目前的情况：我们想在世界地图（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;
  }
}

标签： javascriptarraysfor-loopsvgcss-animations

解决方案

您需要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);

推荐阅读