javascript/css中的連續動畫

我有一個圓，由12個圓弧段組成，我想讓用戶看到從開始模式到結束模式的轉換。（會有很多開始和結束模式）。javascript/css中的連續動畫

我已經在css文件中包含transition屬性，所以這不是問題。

這裏是到目前爲止我的代碼：

function playAnimations(){ 
console.log("gets inside playanimations") 
var totalLength = document.getElementsByClassName("container")[0].children.length 
console.log(totalLength) 
for(var i = 0; i < totalLength; i++){ 
    var current_pattern = document.getElementsByClassName("container")[0].children[i] 
     for(var j = 0; j < 12; j++){ 
      $('#LED' + (j+1)).css('transition-duration', '0s'); 
      $('#LED' + (j+1)).css({fill: current_pattern.children[1].children[j].style.backgroundColor}); 

     } 

     for(var k = 0; k < 12; k++){ 
      $('#LED' + (k+1)).css('transition-duration', "" + current_pattern.children[3].children[0].value + "ms"); 
      $('#LED' + (k+1)).css({fill: current_pattern.children[2].children[k].style.backgroundColor}); 

     }  

} 
}

for循環外通過所有的圖案橫穿而內兩個for循環遍歷該特定圖案的開始和結束值。我遇到的問題是，我只能看到圓上的最終顏色，而不是開始顏色。

有誰知道一個很好的解決方法，或者我可以做些什麼來糾正這個問題？任何反饋或幫助表示讚賞。

來源

2016-09-26 blazerix

問題是，你不會讓任何時間過渡，你設置一種顏色，並立即設置下一個。在設置下一個顏色之前，您需要使用setTimeout。如果你用你迄今爲止的工作代碼搭建一個jsfiddle，那麼制定答案會更容易。 – ariel

您提供的代碼只是[mcve]。通過添加最小的HTML和CSS，您可能會得到更快，更可靠的答案。 –

所以，如果你找到答案，http://stackoverflow.com/help/self-answer – ariel

給你的元素一個transition-delay值。當然，每一個不同的，像這樣

#LED1 { 
    transition-delay: 0.1s; 
} 

#LED2 { 
    transition-delay: 0.2s; 
} 

... 

#LED2 { 
    transition-delay: 1.2s; 
}

這應該這樣做。您應該可以直接在CSS中設置transition-duration，我認爲不需要JavaScript。

是否有一個特殊的理由有2內循環？兩者都不應該足夠嗎？

來源

2016-09-26 22:40:01 JHolub

我有一組開始值和結束值。我基本上想要實現的是圓圈顯示起始值（它們只是一堆顏色），然後過渡到最終值顏色。所以我認爲每一套價值觀的一個循環是正確的想法。你如何用一個循環來做到這一點？ – blazerix

不幸的是，transition-delay沒有起作用，它仍然只顯示第二個inner for循環運行後的顏色。 – blazerix

問題是，這段代碼可能運行得如此之快，以至於所有這4個命令都被寫入一個for循環，所以可見效果將相同。你想至少在第二個循環中使用'setTimeout'。另外我注意到你正在使用'fill'，是不是SVG？ – JHolub

-1

檢查你所需要的過渡屬性來定義
```
transition-property* 
transition-duration* 
transition-timing-function 
transition-delay 
```
過渡延遲可以幫助你，如果你設置使用一個js循環它來連接過渡。
檢查功能越來越並（在Chrome的開發者控制檯將幫助您快速檢查）
你確定你想容器的類來獲取元素設置正確的價值觀？由於它是div的常用名稱，因此可能會在函數中獲取一些不需要的元素。我建議將課程改爲另一個不太常用的名稱。
爲什麼兩個循環？我想第一個是在實際轉換之前重置顏色，因爲你定義了transition-duration:0s;第二個是實際轉換？
我在每個循環中看到的問題是您在兩行中設置了css（用;分隔）。嘗試$('#LED' + (k+1)).css('transition-duration', "" + current_pattern.children[3].children[0].value + "ms").css({fill: current_pattern.children[2].children[k].style.backgroundColor});。

也許改變填寫背景顏色

$('#LED' + (k+1)).css('transition-duration', "" + current_pattern.children[3].children[0].value + "ms").css('background-color', current_pattern.children[2].children[k].style.backgroundColor);

您可以在W3C找到所有關於過渡的文檔！

來源

2016-09-26 22:18:04 CamoNunez

我有我的CSS中的過渡屬性 – blazerix

我不知道這一點，所以爲什麼downvote我？ – CamoNunez

我沒有投票給你，只是upvoted所以你回到0. – blazerix

javascript/css中的連續動畫

回答

相關問題