javascript/cssでの連続したアニメーション

Question

私は円があり、12の円弧セグメントで構成されており、開始パターンから終了パターンへの遷移をユーザーに見せたいと思っています。 （開始パターンと終了パターンが多数あります）。

私はcssファイルにトランジションプロパティを含めました。これは問題ではありません。ここ

は、これまで私のコードである：

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}); 

     }  

} 
} 

ループの内側の2つは、その特定のパターンの開始と終了の値をトラバースしながら、ループの外側のすべてのパターンを通って横断します。私が抱えている問題は、始めの色ではなく円の終わりの色しか見ないということです。

この問題を解決するには、誰かが適切な回避策や可能性があることを知っていますか？ご意見やご協力をいただければ幸いです。

Answer 1

要素にはtransition-delayの値を指定します。もちろん、このようなそれぞれのための別の1つ、

#LED1 { 
    transition-delay: 0.1s; 
} 

#LED2 { 
    transition-delay: 0.2s; 
} 

... 

#LED2 { 
    transition-delay: 1.2s; 
} 

それはそれを行う必要があります。 のCSSに直接transition-durationを設定する必要があります。JavaScriptは必要ありません。

2つのinner forループを持つ特別な理由はありますか？両方を行う人は十分ではありませんか？

Answer 2

1. あなたはJSループを使用して、それを設定している場合

   transition-property* 
   transition-duration* 
   transition-timing-function 
   transition-delay 
   

   遷移遅延がトランジションを連結するためにあなたを助けることができる定義する必要がトランジションのプロパティを確認してください。

2. あなたの関数が正しい値を取得および設定されて確認してください（Chromeのdevのコンソールでクイックチェックがお手伝いします）

3. あなたはクラスとしてコンテナによって要素を取得したいあなたは確かにいますか？ divの一般的な名前であるため、関数内にいくつかの不要な要素が含まれている可能性があります。クラスをあまり一般的でない別の名前に変更することをお勧めします。

4. なぜ2つのループですか？私はあなたが定義したように実際の遷移の前に色をリセットするためのものであると想像してくださいtransition-duration:0s; 2番目は実際の遷移でしょうか？

5. 私が各ループで見る問題は、cssを2行に（;で区切って）設定することです。 お試しください$('#LED' + (k+1)).css('transition-duration', "" + current_pattern.children[3].children[0].value + "ms").css({fill: current_pattern.children[2].children[k].style.backgroundColor});

   そしておそらくあなたはW3Cで遷移に関するすべてのドキュメントを見つけることができ、背景色

   $('#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);

に記入変えます！