0
我正在使用Javascript处理几个CSS类。我的脚本是按照时间顺序排列的，它们一起播放动画。我觉得我很接近，但我坚持，有什么见解？基本上，我需要步骤1和步骤2在同一时间一起走完一秒的持续时间，步骤3在步骤1和2之后持续一秒，步骤4和步骤5一起走到一起在步骤1,2,3和4 ......之后的同一时间持续一秒钟。在步骤6结束时，重置计时器并重复。我有一个SVG，它由一堆线组成。其中一些线条必须在序列中的某个时间“开启”，有些必须变得更大，所以我只能在某段时间内切换课程，否则它们会关闭。定时序列中的Javascript动画
这就是我的代码的样子（简单的SVG只是一个演示模型）。它将手动添加类的元素，但不会复位它的定时器和无限重复，因为我一直无法弄清楚如何清除班后，我将它们添加：
<!DOCTYPE html>
<html>
<head>
<style>
#line1, #line2, #line3, #line4, #line5, #line6 {
visiblity: hidden;
}
.showElement {
visibility: visible !important;
}
.growElement {
transform: scale(1.5) perspective(1px);
}
</style>
</head>
<body>
<svg height="210" width="500">
<line id="line1" class="first" x1="0" y1="0" x2="200" y2="200" style="stroke:red;stroke-width:2" />
<line id="line2" class="first" x1="0" y1="0" x2="200" y2="300" style="stroke:orange;stroke-width:2" />
<line id="line3" class="second" x1="0" y1="0" x2="200" y2="400" style="stroke:yellow;stroke-width:2" />
<line id="line4" class="third" x1="0" y1="0" x2="200" y2="500" style="stroke:green;stroke-width:2" />
<line id="line5" class="fourth" x1="0" y1="0" x2="200" y2="600" style="stroke:blue;stroke-width:2" />
<line id="line6" class="fifth" x1="0" y1="0" x2="200" y2="700" style="stroke:purple;stroke-width:2" />
<line id="line7" class="sixth" x1="0" y1="0" x2="200" y2="800" style="stroke:pink;stroke-width:2" />
</svg>
<script>
document.addEventListener('DOMContentLoaded', function() {
setInterval(function() {
// create array of all the elements with the class 'first', loop over each one
// in this case, ['
var firstClass = document.getElementsByClassName("first");
console.log(firstClass[0]);
console.log(firstClass[1]);
setInterval(function(){
firstClass[0].classList.add("showElement");
firstClass[1].classList.add("showElement");
}, 1000);
var secondClass = document.getElementsByClassName("second");
console.log(secondClass[0]);
console.log(secondClass[1]);
setInterval(function(){
secondClass[0].classList.add("showElement");
secondClass[1].classList.add("showElement");
}, 2000);
var thirdClass = document.getElementsByClassName("third");
console.log(thirdClass[0]);
setInterval(function(){
thirdClass[0].classList.add("showElement");
}, 3000);
var fourthClass = document.getElementsByClassName("fourth");
console.log(fourthClass[0]);
setInterval(function(){
fourthClass[0].classList.add("showElement");
}, 4000);
}, 4000);
});
</script>
</body>
</html>
我还需要图了解如何一次添加多个类，仅需要一些步骤。例如，元素.first，.second和.third我想突然出现，所以我给他们.showElement，但元素.third我也想添加.growElement。我怎么做？
这是我的Javascript代码，不接受多个串联的东西。它使用计数器，所以不像以前那样粗糙。它的每个项目会仔细检查该列表，并应用一种样式：
<script>
document.addEventListener('DOMContentLoaded', function() {
var connections = ['first', 'second', 'third', 'fourth', 'fifth', 'sixth'];
var i = 0; // index of the first item to show
setInterval(function(){
console.log(connections[i]);
document.getElementsByClassName(connections[i]).classList.add("showElement");
var counter = connections[i++]; // get the current item index and increment
if ((i == connections.length)) {
i = 0; // reset to first element if reach the end
}
}, 1000);
});
注：我不是在寻找使用jQuery，只是纯粹的JavaScript。这个动画存在于一个单独的页面网站上，没有其他带有外部SVG的JavaScript，所以它必须存在于SVG文件中，而且我没有看到安装大型库的许多要点。
但我正在研究可能的更好的方法来解决这个问题。有人告诉我这是'承诺'的工作。我现在正在研究Snap.svg，Q，When，WinJS和RSVP.js库，如果你认为它会更好，甚至jQuery，如果真的更容易，我会欢迎你的建议。
只是澄清你怎么想的那样运行。 在一秒钟内将showElement添加到className为one的所有元素。 你是否希望showElement坚持，然后持续整整6秒钟，将其从一切中删除，并重复... 或仅为最初的1秒然后删除。 – Koborl
是的，就像你描述的那样。它可以持续整整6秒......这是我迄今为止得到它的唯一方法。理想情况下，它只会持续1秒钟然后被移除。 – cssidy
在时间地图这样因此，最好你能告诉我应该如何运行 '1：1'' 2：2' '3：3' 在那里秒过去：显示元素，即哪些要素在什么时间点显示。 – Koborl