如何在此之後爲其他顏色製作動畫？

我有一個在html中使用'div'並在CSS中格式化的2x4框。 this 如何在此之後爲其他顏色製作動畫？

<body> 

<div class="container"> 
<div class="box rightSpacing"> 
    <!--Box 1---> 
</div> 
<div class="box rightSpacing" id="green"> 
    <!--Box 2---> 
</div> 
<div class="box rightSpacing"> 
    <!--Box 3---> 
</div> 
<div class="box"> 
    <!--Box 4---> 
</div> 

<div class="box rightSpacing"> 
    <!--Box 5---> 
</div> 
<div class="box rightSpacing" id="yellow"> 
    <!--Box 6---> 
</div> 
<div class="box rightSpacing"> 
    <!--Box 7---> 
</div> 
<div class="box"> 
    <!--Box 8---> 
</div> 


</div> 

</body>

我需要後直接就在相似的樣式進行動畫處理的「DIV ID =‘綠色’」到綠色的時間長度相似。這是我需要幫助的地方，我卡住了。謝謝

這是我已經在javascript中的動畫代碼。

   lerp = function(a, b, u) { 
       return (1 - u) * a + u * b; 
      }; 


      fade = function(element, property, start, end, duration) { 
       var interval = 10; 
       var steps = duration/interval; 
       var step_u = 1.0/steps; 
       var u = 0.0; 
       var theInterval = setInterval(function() { 
       if (u >= 1.0) { 
        clearInterval(theInterval) 
       } 
       var r = parseInt(lerp(start.r, end.r, u)); 
       var g = parseInt(lerp(start.g, end.g, u)); 
       var b = parseInt(lerp(start.b, end.b, u)); 
       var colorname = 'rgb(' + r + ',' + g + ',' + b + ')'; 
       el.style.setProperty(property, colorname); 
       u += step_u; 
       }, interval); 
      }; 

      el = document.getElementById('yellow'); 
      property = 'background-color'; 
      startColor = { 
       r: 255, 
       g: 255, 
       b: 255, 
      }; 
      endColor = { 
       r: 255, 
       g: 255, 
       b: 0 
      }; 
      fade(el, 'background-color', startColor, endColor, 10); 



      setTimeout(function() { 
       fade(el, 'background-color', endColor, startColor, 10); 
      }, 1000);

請爲我感到非常新的這個裸！

來源

2016-01-22 Joe96

你怎麼想動畫該div？ – ketan

以我已經有的方式。它應該像黃色一樣運作。 https://jsfiddle.net/flake96/undpef6g/ – Joe96

我看不到黃色div動畫。它只是隱藏一段時間後沒有任何動畫 – ketan

您可以按照以下方法操作。

el = document.getElementById('yellow'); 
el1 = document.getElementById('green'); 

setTimeout(function() { 
    fade(el, 'background-color', endColor, startColor, 10); 
    fade(el1, 'background-color', greeColor, startColor, 2000); 
}, 1000);

，並更改功能

el.style.setProperty(property, colorname);

要

element.style.setProperty(property, colorname);

Working Fiddle

來源

2016-01-22 04:41:58 ketan

謝謝，並添加另一個我會重複嗎？ – Joe96

@ Joe96是的，你可以。 'setinterval'。 https://jsfiddle.net/undpef6g/3/ – ketan

謝謝你可愛，如果我想添加一個額外的顏色在不同的盒子？ – Joe96

如何在此之後爲其他顏色製作動畫？

回答

相關問題