CODEWITHSUNDEEP
javascriptreactjstypescript
Boidurja Talukdar
Boidurja Talukdar

Reputation: 696

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?

Upvotes: 0

Views: 105

Answers (2)

Francesco Clementi
Francesco Clementi

Reputation: 2102

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)
}

Upvotes: 1

Dodoboulistick
Dodoboulistick

Reputation: 38

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

Upvotes: 0

Related Questions