Javascript 如何慢慢淡出一个彩色的盒子？

刚接触javascript，我就开始工作了，一个方框变成了白色，但尝试了各种方法来设置淡出时间，但都没有成功

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

---

谢谢

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

document.getElementById（“按钮3”）.addEventListener（“单击”，函数（）{
document.getElementById（“box”）.style.backgroundColor=“白色”；
})

#框{
背景：金；
宽度：300px；
高度：300px；
过渡：所有1；
}

点击
测试

试试这个方法

 <style>
  body {
  transition: background-color 2s cubic-bezier(1, 1, 1, 1);
  transition-delay: 0s;
   }
  </style>

<script>
var colors = ["red", "orange", "yellow", "green", "blue", "purple"];
var currentIndex = 0;

setInterval(function() {
document.body.style.cssText = "background-color: " + colors[currentIndex];
currentIndex++;
if (currentIndex == undefined || currentIndex >= colors.length) {
    currentIndex = 0;
 }
 }, 1000);
 </script>

身体{
过渡：背景色2s三次贝塞尔（1,1,1,1）；
转换延迟：0s；
}
变量颜色=[“红色”、“橙色”、“黄色”、“绿色”、“蓝色”、“紫色”]；
var currentIndex=0；
setInterval（函数（）{
document.body.style.cssText=“背景色：”+颜色[currentIndex]；
currentIndex++；
如果（currentIndex==undefined | | currentIndex>=colors.length）{
currentIndex=0；
}
}, 1000);

要淡出彩色框，请按照以下两个步骤慢慢淡出：

使用CSS转换属性（允许CSS属性值的更改在指定的持续时间内平稳进行）

使用JavaScript（element.style.display=“none”）从文档流中删除淡出元素

//使用class=“close”获取所有元素
let close=document.queryselectoral（“.close”）；
for（设i=0；i

*{框大小：边框框；}
/*样式警报消息*/
.警惕{
位置：相对位置；
填充：1雷姆1.9雷姆1雷姆1雷姆；
边缘底部：1rem；
字号：1rem；
字体系列：无衬线；
边框：1px实心透明；
边界半径：.25rem；
过渡：不透明度。6s线性；
}
/*警报的上下文类*/
.警报主{
颜色：#004085；
背景色：#cce5ff；
边框颜色：#b8daff；
}
.警报二级{
颜色：#383d41；
背景色：#e2e3e5；
边框颜色：#d6d8db；
}
.警告{
颜色：#856404；
背景色：#fff3cd；
边框颜色：#ffeeba；
}
.警惕危险{
颜色：#721c24；
背景色：#f8d7da；
边框颜色：#f5c6cb；
}
/*样式关闭按钮*/
.结束{
位置：绝对位置；
排名：0；
右：0；
填充：1rem；
颜色：继承；
光标：指针；
字体大小：继承；
字号：900；
背景色：透明；
边界：0；
}

点击×；用于淡出方框的图标：

主要的，重要的此警报框表示一项重要操作。
&时代；
警告此警报框可能表示可能需要注意的警告。
&时代；
危险！此警报框可能表示危险或潜在的负面行为。
&时代；
次要的此警报框表示不太重要的操作。
&时代；

如果允许的话，你只需要

$（“#box”）.animate（{backgroundColor:'white'，2000）。。。阅读