时间戳

首页 > 解决方案 > 如何慢慢淡出彩色框？

javascript - 如何慢慢淡出彩色框？

问题描述

javascript新手，我得到了这个工作，一个变白的盒子，但尝试了各种方法来设置淡出时间不成功。

document.getElementById("button3").addEventListener("click", function(){           
document.getElementById("box").style.backgroundColor = "white";  });

谢谢

标签： javascriptfade

解决方案

您可以使用您的代码并添加一些 css 来为过渡设置动画：

document.getElementById("button3").addEventListener("click", function(){
  document.getElementById("box").style.backgroundColor = "white";
})
#box{
  background: gold;
  width: 300px;
  height: 300px;
  transition: all 1s;
}
<button id="button3">click</button>
<div id="box">
  test
</div>

如果包括过渡：全 1；对于您的班级，每个 css 更改都将是动画的，您可以将持续时间更改 1s 配置为所需的过渡持续时间。

推荐阅读