Javascript 如何通过svg路径和多边形以比.更快的速度循环？

我正在绘制不同的svg地图。每一个国家都会逐渐消失。下面我单击

#compbtn

按钮，使用

.compbtn

加载

.compMap

映射。然而，

。在处理和开始淡入每个多边形和路径之前，每个

似乎都非常慢

如何比使用

更快地循环。每个

html

<div class="oldmap">SVG old map polygons and path</div>
<div class="newmap">SVG old map polygons and path</div>
<div class="computer_all">SVG old map polygons and path</div>

这种效果（大部分）可以通过CSS实现吗？如果我这样做，我会循环遍历每个形状，并在加载JavaScript时通过
style
属性设置它们的自定义
transitiondelay
属性，并在样式表中使用CSS选择器，如
.oldmap.out.shape
和
和
，因此您只需使用jQuery编辑贴图的标记，即可触发所有具有相应延迟的淡入淡出效果。这避免了完全使用for循环（至少在需要转换时是这样）

CSS:

启动：

$('.newmap .country, .newmmap .shape').each(function(i) {
  $(this).css('transition-delay', i/500 + 's');
});

$('.oldmap .country, .oldmap .shape').each(function(i) {
  $(this).css('transition-delay', i/500 + 's');
});

$('.computer_all .country, .computer_all .shape').each(function(i) {
  $(this).css('transition-delay', i/500 + 's');
});

点击：

$('#compbtn').click(function() {
  $('.newmap, .oldmap').addClass('out');
  $('.computer_all').addClass('in');
});

传统的for循环可能会更快，但您可能需要进行一些分析，以确保这是真正的瓶颈。我的意思是要进行一些性能测试，以发现真正的瓶颈。您是否考虑过可能是循环的内容（衰减效应）导致了减速，而不是循环本身？如果你保留.each循环，但注释掉它的内容，它是否仍然运行缓慢？@rob.m：因为它不是
。每个
都是问题所在。Juhana在说“循环是否很慢，但没有内容？”（我想在这种情况下你说不出来，但我知道她是从哪里来的。）@rob.m：你需要在问题中加一个；人们不必跟随随机的非现场链接来帮助你，链接会腐烂，使问题及其答案在将来对人们毫无用处。问题中的代码在JS和HTML之间甚至没有匹配的类名。非常感谢！这就解决了问题。完全忽略了我可以使用css3来完成它。
$('.newmap .country, .newmmap .shape').each(function(i) {
  $(this).css('transition-delay', i/500 + 's');
});

$('.oldmap .country, .oldmap .shape').each(function(i) {
  $(this).css('transition-delay', i/500 + 's');
});

$('.computer_all .country, .computer_all .shape').each(function(i) {
  $(this).css('transition-delay', i/500 + 's');
});

$('#compbtn').click(function() {
  $('.newmap, .oldmap').addClass('out');
  $('.computer_all').addClass('in');
});