Question

我有像

这样的HTML课程

<path class="paths" fill="gainsboro" d="M644 1780c13...>
<path class="paths" fill="#E5E6E5" d="M759 2308c12,-10...>
<path class="paths" fill="#E0F3EC" d="M1340 1848c-3,9 5,6...>

CSS默认值

.paths {display:none;}

JS

window.onload="show()";
function show(){
  var a = document.querySelectorAll(".paths");
  for(var i=0; i<a.length;i++){
  a[i].style.display="";
  }
}

使用javascript我试图逐个取消隐藏所有元素来创建动画。正如你所看到的，我的js代码不起作用，经过几个小时的尝试决定要求，因为我迷路了。

编辑：我忘了追加我的项目 - ＆gt; https://codepen.io/r8w9/pen/ZxePML

Answer 1

这就是我要做的事情：

将onload函数添加为匿名函数，因为它没有需要一个名字
将元素放在一个真正的数组中以便访问 .shift()
设置间隔以在定时的基础上执行取消隐藏
在timed函数内：从中删除并获取第一个元素数组使用.shift()
将元素显示设置为initial（它是默认，因为它可能不是block）
如果数组是空删除间隔

window.onload = function() {
  var paths = document.querySelectorAll(".paths");
  var hidden = [];
  for (var i = 0; i < paths.length; i++) hidden.push(paths[i]);
  var interval = setInterval(() => {
    hidden.shift().style.display = "initial";
    if (hidden.length == 0) clearInterval(interval);
  }, 200);
}

.paths {
  display: none;
}

<span class="paths">A</span><span class="paths">A</span><span class="paths">A</span><span class="paths">A</span>

（我用了<span>，所以有些事情明显发生了）

编辑对于旧版浏览器（不支持箭头功能）：

var hidden = [];
var interval;
window.onload = function() {
  var paths = document.querySelectorAll(".paths");
  for (var i = 0; i < paths.length; i++) hidden.push(paths[i]);
  interval = setInterval(function() {
    hidden.shift().style.display = "initial";
    if (hidden.length == 0) clearInterval(interval);
  }, 200);
}

.paths {
  display: none;
}

<span class="paths">A</span><span class="paths">A</span><span class="paths">A</span><span class="paths">A</span>

Answer 2

window.onload=show();
function show(){
  var a = document.querySelectorAll(".paths");
  for(var i=0; i<a.length;i++){
  
  a[i].classList.remove("paths");
  }
}

.paths {display:none;}
Because class still exist in <path> element that's why it's not show <path> content. Best approach is to remove class to show <path>

<path class="paths" fill="gainsboro" d="M644 1780c13...">a</path>
<path class="paths" fill="#E5E6E5" d="M759 2308c12,-10...">b</path>
<path class="paths" fill="#E0F3EC" d="M1340 1848c-3,9 5,6...">c</path>

Answer 3

希望这也会对你有帮助。

＆＃13;

var elements = document.getElementsByClassName("paths");
console.log(elements)
for (var i = 0, len = elements.length; i < len; i++) {
(function(i){

    window.setTimeout(function(){
    elements[i].style.display="block";
    }, i * 300);

  }(i));
}

＆＃13;

.paths {
display:none;
}

＆＃13;

<svg height="400" width="450">
<path class="paths" id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
  <path class="paths" id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />
  <path class="paths" d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
  <path class="paths" d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
</svg>

＆＃13;

通过javascript逐个取消隐藏类元素

3 个答案: