为背景变化添加淡入/淡出

Question

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

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;

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

Answer 1

您可以像这样通过 CSS 设置到元素的过渡：

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

我建议查看此文档

Answer 2

您可以使用transition为样式更改设置动画，然后使用classList.add和classList.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>