1

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.

Jnewbie
  • 163
  • 1
  • 13
  • The browser has no time to redraw each time you change the value. Use CSS transitions. See http://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds. –  Nov 24 '15 at 11:42
  • you are doing the animation in milliseconds, you wont even see them – CoderPi Nov 24 '15 at 11:43
  • @CodeiSir I think you mean sub-microseconds, but it wouldn't matter any way, since the browser will not redraw in the midst of running JS. –  Nov 24 '15 at 11:45
  • @torazaburo, sometimes it does redraw, but only if it takes very long – CoderPi Nov 24 '15 at 11:46
  • @torazaburo thanks mate, very interesting reference, but those are unknown friends to me, maybe can I use the .setTimeout to made the animation? – Jnewbie Nov 24 '15 at 12:19
  • @Jnewbie, use `setInterval()`, check my answer – Mi-Creativity Nov 24 '15 at 12:28

1 Answers1

2

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>
Mi-Creativity
  • 9,554
  • 10
  • 38
  • 47
  • Well done mate, thats what i was thinking about to fix it, very accurate to avoid transitions ( the only thing that make me mad its that my classmate got the same code i posted and it works for him!!) sorry for my bad english – Jnewbie Nov 24 '15 at 14:16
  • 1
    You welcome, you need to kick the heck out of your classmate for this:) just kidding, In "*pure*" javascript I couldn't think of another way to do it, well actually I did think of getting rid of the Interval and make use of the `setTimeout()` as a "*DELAY*" function but it didn't work for me, I think if it was jQuery I could make use of the `.delay()` function, but as raw javascript nothing other than this solution in the answer worked for me – Mi-Creativity Nov 25 '15 at 00:29