Soy bastante nuevo en javascript, pero finalmente pude hacer que esto funcionara. Puedo cambiar el color de fondo. Pero está cambiando mucho y me preguntaba si puedo agregar un fundido de entrada/salida si cambio el color de fondo de uno a otro botón.
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;También estaba pensando en cambiar los colores a las imágenes.
Puede establecer una transición al elemento mediante CSS de esta manera:
button { -webkit-transition: background-color 1000ms linear; -ms-transition: background-color 1000ms linear; transition: background-color 1000ms linear; }Recomiendo consultar esta documentación .
Puede usar la transition para animar un cambio de estilo, luego use classList.add y classList.remove para agregar/eliminar las clases que contienen el nuevo color.
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>