如何慢慢淡出一个彩色盒子

Question

javascript新手，我处理了这个问题，一个盒子变成了白色，但尝试了各种方法来设置淡出时间，但都没有成功。

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

感谢

Answer 1

您可以使用您的代码并添加一些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配置为所需的过渡持续时间。

Answer 2

尝试此方法

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

Answer 3

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

1. 使用CSS转换属性(允许在指定的持续时间内顺利更改CSS属性值(
2. 使用JavaScript(element.style.display="none">(从文档流中删除淡出元素

// Get all elements with class="close"
let close = document.querySelectorAll(".close");
for (let i = 0; i < close.length; i++) {
close[i].onclick = function() {
// Get the parent of <span class="close"> (<div class="alert">)
let div = this.parentElement;
// Set the opacity of div to 0
div.style.opacity = "0";
// Hide the div after 600ms (the same amount of milliseconds it takes to fade out)
setTimeout(function() { div.style.display = "none"; }, 600);
}
}

* {box-sizing: border-box;}
/* Style Alert Message */
.alert {
position: relative;
padding: 1rem 1.9rem 1rem 1rem;
margin-bottom: 1rem;
font-size: 1rem;
font-family: sans-serif;
border: 1px solid transparent;
border-radius: .25rem;
transition: opacity .6s linear;
}
/* Contextual Classes for alert */
.alert-primary {
color: #004085;
background-color: #cce5ff;
border-color: #b8daff;
}
.alert-secondary {
color: #383d41;
background-color: #e2e3e5;
border-color: #d6d8db;
}
.alert-warning {
color: #856404;
background-color: #fff3cd;
border-color: #ffeeba;
}
.alert-danger {
color: #721c24;
background-color: #f8d7da;
border-color: #f5c6cb;
}
/* Style Close Button */
.close {
position: absolute;
top: 0;
right: 0;
padding: 1rem;
color: inherit;
cursor: pointer;
font-size: inherit;
font-weight: 900;
background-color: transparent;
border: 0;
}

<p>Click on the &times; icon to fadeout the box:</p>
<div class="alert alert-primary">
<b>Primary!</b> This alert box indicates an important action.
<button type="button" class="close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="alert alert-warning">
<b>Warning!</b> This alert box could indicate a warning that might need attention.
<button type="button" class="close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="alert alert-danger">
<b>Danger!</b> This alert box could indicate a dangerous or potentially negative action.
<button type="button" class="close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="alert alert-secondary">
<b>Secondary!</b> This alert box indicates a less important action.
<button type="button" class="close">
<span aria-hidden="true">&times;</span>
</button>
</div>