如何慢慢淡出彩色框？

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>