如何在此之后为其他颜色制作动画？

我有一个在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

如何在此之后为其他颜色制作动画？

回答

相关问题