如何改变使用变量的CSS来制作动画 [英] How change css using variables to make an animation

问题描述

如何使用JavaScript转换CSS值？
我做了这段代码，但它不起作用：

  var num = 100; 
函数fillDiv {
 var a = document.getElementById（principal）; （var i = 0; i <100; i ++）{
 num = num-25; 
 a.style.background = -  moz-radial-gradient（#FFFFFF+ num +％，＃006699 200％）;; 
 if（num == 0）{
 break; 
 
 
  

在调试窗口中一切都很顺利，但是当我在元素标签上检查它的值没有改变。

解决方案

正如评论中所述，循环的太快了请注意效果，相反，您可以使用 interval ，将间隔期设置为 40 ，这就像 25 帧每秒，也使 10 而不是 4 在 num = num - 10; 以便动画看起来像下面那样平滑和明显：



JS Fiddle

  var num = 100; var $ interval = setInterval（function（）{var a = document.getElementById（principal）; num = num  -  10; if（num> = 0）{a.style。背景='-moz-radial-gradient（#FFF'+ num +'％，＃1e69de200％）'; a.style.background ='-webkit-radial-gradient（#FFF + NUM +％，＃1e69de 200％）; a.style.background ='径向渐变（#FFF'+ num +'％，＃1e69de 200％）'; } else {clearInterval（$ interval）; }}，40）;  

body {margin：0; padding：0;}＃principal {width：100vw;身高：100vh;显示：块; background-color：＃1e69de; margin：0 auto;}

 < div id =主体>< / div>  

How can I transition CSS values using JavaScript? I made this code, but it isn't working:

var num = 100;
function fillDiv{
var a=document.getElementById("principal");
for (var i = 0; i<100; i++){
    num=num-25;
    a.style.background="-moz-radial-gradient(#FFFFFF "+num+"%, #006699 200%);";
    if (num==0){
       break;
    }
 }

In the debug window all gone good, but when I check it on elements tag the value hasn't changed.

解决方案

As explained in comments, the for loop is too quick to notice the effect, Instead you may use interval, set the interval period to 40 this is like 25 frames per second, also made the step 10 instead of 4 in num = num - 10; so that the animation will look smooth and noticeable like below:

JS Fiddle

var num = 100;

var $interval = setInterval(function() {
  var a = document.getElementById("principal");
  num = num - 10;
  if (num >= 0) {
    a.style.background = '-moz-radial-gradient(#FFF ' + num + '%,#1e69de 200%)';
    a.style.background = '-webkit-radial-gradient(#FFF ' + num + '%,#1e69de 200%)';
    a.style.background = 'radial-gradient(#FFF ' + num + '%,#1e69de 200%)';
  } else {
    clearInterval($interval);
  }
}, 40);

body {
  margin: 0;
  padding: 0;
}
#principal {
  width: 100vw;
  height: 100vh;
  display: block;
  background-color: #1e69de;
  margin: 0 auto;
}

<div id="principal"></div>

这篇关于如何改变使用变量的CSS来制作动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！