javascript - 如何使用 javascript 知道不透明度值？

Question

我正在使用 transition: opacity 5s; 属性。当我的 opacity 值为 0.4 或 0.6 或 .2 时，我想显示不同的警报或控制台消息。单击按钮时，我正在进行过渡，但我想知道不透明度的进度，以便显示这些消息？

有什么办法可以做到这一点

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

如果有任何我将检查不透明度值的进度回调，我们将获得 transitionend 回调？

Answer 1

没有任何事件可以被监听来提供你想要的——除非你打算使用线性过渡。在这种情况下，您可以将不透明度的更改划分到 0.2s 插槽中，将过渡端的不透明度更改为下一个值 - 0.8、0.6 等。

然而，您的代码采用默认的 transition-timing-function 属性，该属性很简单 - 不是线性的 - 所以 transitionend 对你没有用。

此代码段每十分之一秒轮询一次不透明度变化，并将当前不透明度写入控制台，以便您了解发生了什么。

有几点:您必须检查不透明度何时刚好小于您的断点之一，您不太可能每次都恰好在 0.6 秒或其他时间达到它；还要注意，在元素完全消失后，控制台继续被写入。时间不会准确，事情是异步发生的。

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