添加 fade-in/fade-out 到背景变化

Question

我是 javascript 的新手，但我终于可以正常工作了。我可以改变背景颜色。但是它很难切换，我想知道，如果我将 backgroundColor 从一个按钮更改为另一个按钮，是否可以添加 fade-in/fade-out。

var btn1 = document.getElementById("tab1");
var btn2 = document.getElementById("tab2");

btn1.addEventListener('click', function (event) {
    changeColor('blue');
});
btn2.addEventListener('click', function (event) {
    changeColor('green');
});

function changeColor(color){
  var elem = document.getElementById( "area" );
  elem.style.backgroundColor =color;

我也在考虑将颜色更改为图像。

Answer 1

您可以通过 CSS 设置元素的过渡，如下所示：

button {
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

我建议查看 this documentation

Answer 2

您可以使用 transition 对样式更改进行动画处理，然后使用 classList.add 和 classList.remove 到 add/remove 包含新颜色的类。

var btn1 = document.getElementById("tab1");
var btn2 = document.getElementById("tab2");

btn1.addEventListener('click', function(event) {
  changeColor('blue');
});
btn2.addEventListener('click', function(event) {
  changeColor('green');
});

function changeColor(color) {
  var elem = document.getElementById("area");
  elem.classList.remove('blue', 'green')
  elem.classList.add(color);
}

#area {
  padding: 50px;
  margin-bottom: 15px;
  transition: background-color 1s;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

<div id='area'></div>
<button id='tab1'>button 1 </button>
<button id='tab2'>button 2 </button>

添加 fade-in/fade-out 到背景变化

Add fade-in/fade-out to background change

javascript

css

background-image

background-color