时间戳

首页 > 解决方案 > 如何使用 javascript 更改不透明度

javascript - 如何使用 javascript 更改不透明度

问题描述

我正在尝试淡化使用 JavaScript 动态创建的元素。

这是我正在尝试做的 CSS 示例：https ://codepen.io/deejay/pen/OJJqZaL

Javascript

...
  const fadeOutWithOpacity = () => {
    const opacity = totalCount >= 1 && 0.5;
    return opacity;
  };

  const handleOpacity = () => {
    setInterval(() => {
      fadeOutWithOpacity();
    }, 3000);
  };

...
style: {
    background: "#FA4379",
    color: "#fff",
    opacity: `${handleOpacity()}`
  }

我只想每 3 秒更改一次不透明度值

标签： javascripthtmlcss

解决方案

transition您可以使用 Javascript 为您的元素添加一个类，这将由于 CSS属性而导致不透明度缓慢降低。

const spawnBox = () => {
  var box = document.createElement("div");
  box.className = "box";  
  
  box.onclick = (event) => {
    box.classList.add("hidden");
  };
  
  document.body.appendChild(box);
};

spawnBox();
setInterval(() => {
  spawnBox();
}, 1000);
.box {
  width: 20px;
  height: 20px;
  
  margin: 5px;
  
  background: red;
  
  transition: opacity .5s;
}

.box.hidden {
  opacity: 0;
}

推荐阅读