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