How to make an animation in javascript/react js?-CodePudding

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?

CodePudding user response：

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().

CodePudding user response：

You need to update the var o with the current opacity before increasing it:

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