我正在用Javascript操作几个CSS类。我的脚本是一个定时序列，它们一起播放动画。我觉得我很亲密，但我被卡住了，任何见解？
基本上，我需要步骤1和步骤2同时在一起持续一秒，步骤3在步骤1和2，步骤4和步骤5之后一起持续一秒钟在步骤1,2,3和4等之后持续一秒的同一时间。在步骤6结束时，重置计时器并重复。
我有一个SVG，它由一堆行组成。这些行中的一些必须在序列中的某个时间“开启”，有些必须变大，所以我只是在那段时间内切换他们的类，否则它们就会关闭。
这就是我的代码的样子（简单的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，但是元素。我想要添加.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，如果它真的更容易），我会欢迎你的建议。
答案 0 :(得分：0)
var connections = ['first', 'second', 'third', 'fourth', 'fifth', 'sixth'];
function showElements(i,duration){
var elements = document.getElementsByClassName(connections[i]);
elements.map((e) => e.classList.add('showElement'))
setTimeout(()=>{
//remove the .showElement after duration to display has elapsed
elements.map((e)=> e.classList.remove('showElement'))
//recursively calls the next animation to be played, resets at 6
showElements((i+1)%6,duration)
},duration)
}
不确定这是否是你想要的确切方式，但它会为每个持续时间添加showElement，然后将其删除。
showElements(0,1000)
答案 1 :(得分：0)
这是一个更清洁的版本，可以在1秒的时间间隔内完成动画，并且可以让您更清楚地控制每帧上发生的事情。
要添加多个类，您可以一次添加任何您喜欢的内容，例如：classList.Add('showElement', 'growElement')（同样适用于删除。See examples）
动画将通过在最后一帧中将帧设置回0来重复循环（0因为帧计数器在switch语句之后递增）。然后在第一帧中确保清除最后一帧的样式。
<html>
<head>
<style>
#line1, #line2, #line3, #line4, #line5, #line6, #line7 {
visibility: hidden;
transform: scale(1) perspective(1);
transition: .5s transform;
}
.showElement {
visibility: visible !important;
}
.growElement {
transform: scale(3.5) perspective(1px);
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenLite.min.js"></script>
<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>
var frame = 1;
// create array of all the elements with the class 'first', loop over each one
// in this case, ['
var firstClass = document.getElementsByClassName("first");
var secondClass = document.getElementsByClassName("second");
var thirdClass = document.getElementsByClassName("third");
var fourthClass = document.getElementsByClassName("fourth");
var fifthClass = document.getElementsByClassName("fifth");
var sixthClass = document.getElementsByClassName("sixth");
var seventhClass = document.getElementsByClassName("seventh");
function hideUnusedClasses(p_classesArray) {
p_classesArray.forEach(function(array, index){
for(var i=0;i<array.length;++i) {
array[i].classList.remove('showElement', 'growElement');
}
});
}
var interval = setInterval(function(){
//console.log('Run every 1 second');
switch(frame) {
case 1:
//console.log('frame', frame);
hideUnusedClasses([sixthClass]);
for(var i=0;i<firstClass.length;++i) {
firstClass[i].classList.add('showElement');
}
break;
case 2:
//console.log('frame', frame);
//console.log('Delete 1 class');
hideUnusedClasses([firstClass]);
for(var i=0;i<secondClass.length;++i) {
secondClass[i].classList.add('showElement');
}
break;
case 3:
//console.log('frame', frame);
//console.log('Delete 2 class');
hideUnusedClasses([secondClass]);
for(var i=0;i<thirdClass.length;++i) {
thirdClass[i].classList.add('showElement', 'growElement');
}
break;
case 4:
//console.log('frame', frame);
hideUnusedClasses([thirdClass]);
//console.log('Delete 3 class');
for(var i=0;i<fourthClass.length;++i) {
fourthClass[i].classList.add('showElement');
}
break;
case 5:
//console.log('frame', frame);
hideUnusedClasses([fourthClass]);
for(var i=0;i<fifthClass.length;++i) {
fifthClass[i].classList.add('showElement');
}
break;
case 6:
//console.log('frame', frame);
hideUnusedClasses([fifthClass]);
for(var i=0;i<sixthClass.length;++i) {
sixthClass[i].classList.add('showElement');
}
frame = 0;
break;
default:
//console.log('all done');
//clearInterval(interval);
}
++frame;
}, 1000);
</script>
</body>
</html>