how to know opacity value using javascript?

Question

I am using transition: opacity 5s; property. I want to show different alert or console message when my opacity value is 0.4 or 0.6 or .2 . on button click I am doing transition but I want to know opacity progress so that i will show those message ?

is there any way to do this

var btn = document.querySelector("button");
var par = document.querySelector("#parId");
btn.addEventListener("click", (e) => {
  par.classList.add("removed");
});
par.addEventListener("transitionend", () => {
  par.remove();
});


#parId {
  transition: opacity 5s;
}
.removed {
  opacity: 0;
}

we are getting transitionend callback if there any progress callback where I will check opacity value ?

Answer 1

There is no event that can be listened to to give what you want - unless you are going to use a linear transition. In that case you can carve your changes of opacity up into 0.2s slots, changing opacity on transitionend to the next value down - 0.8, 0.6 etc.

Your code however takes the default for the transition-timing-function property which is ease - not linear - so transitionend is of no use to you.

This snippet polls the opacity changes every tenth of a second and writes the current opacity to the console so you can see what is happening.

A couple of points: you will have to check for when the opacity goes just less than one of your break points, you are unlikely every to hit it just at exactly 0.6s or whatever; also notice that the console carries on being written to after the element has totally disappeared. The timing will not be exact, things are happening asynchronously.

<style>
#parId {
  transition: opacity 5s;
  width: 50vw;
  height: 50vh;
  background: blue;
  opacity: 1;
  display: inline-block;
}
.removed {
  opacity: 0;
}
</style>
<div id="parId"></div>
<button>Click me</div>
<script>
var btn = document.querySelector("button");
var par = document.querySelector("#parId");
btn.addEventListener("click", (e) => {
 let interval = setInterval(function () {
    const opacity = window.getComputedStyle(par).opacity
    console.log(opacity);
    if (opacity == 0) {clearInterval(interval);}
    }, 100);
    par.style.opacity = 0;
});
</script>

Answer 2

You could potentially check periodically like this, although your interval will need to be at least the speed of the opacity animation or be quicker than it to catch the values.

var par = document.querySelector("#parId");
    
     setInterval(function() {
      console.log(window.getComputedStyle(par).opacity);
     }, 100)

#parId{
opacity: 0.2;
  transition: opacity 3s ease-in-out;
  }
  
  
#parId:hover {
  opacity: 1;
}

<div id="parId">
test
</div>