How to make an animation in javascript/react js?

I am trying to change the opacity of an element after every 100 milliseconds after a click event. But it is not working. The function change is called after a click event. Here is my code:

function change (i) {
  var o:number = 0;
  setTimeout( function() {
    o = o + 0.1;
    document.querySelector("div.label").style.opacity = o;
    console.log("o = " + o);
  }, 100)
}

When I console log, the value of o is always 0.1. What is wrong with this code?

Answer

You’re using setTimeout(), but I think you’re looking for setInterval() method (if you want something to repeat itself).

Try :

function change (i) {
  var o:number = 0;
  setInterval( function() {
    o = o + 0.1;
    document.querySelector("div.label").style.opacity = o;
    console.log("o = " + o);
  }, 100)
}

BE CAREFUL : you have to prevent your variable o to go beyond 1 (maximum opacity). You can use clearInterval().