Básicamente, quiero que el usuario sepa visualmente que los datos cambiaron cuando hizo clic en un botón.
Cada vez que el usuario hace clic en un botón diferente, el mismo div tiene que desaparecer y aparecer de nuevo.
Intenté alternar y hacer la transición, pero no funciona, ¡puedes ver que funciona solo cuando haces clic por primera vez!
¡Gracias!
function showMe(n){ let myDiv = document.getElementById('myDiv'); myDiv.innerHTML = n==1?"Hello Data":"Another Data"; myDiv.style.opacity = '1'; } #myDiv { width: 300px; height: 300px; border: 2px solid black; opacity: 0; transition: opacity 1s; } <div id="myDiv"></div> <button onclick="showMe(1)">ShowData</button> <button onclick="showMe(100)">AnotherData</button> function showMe(n){ let myDiv = document.getElementById('myDiv'); myDiv.style.opacity = '0'; setTimeout(function(){ myDiv.innerHTML = n==1?"Hello Data":"Another Data"; myDiv.style.opacity = '1'; }, 1000); } #myDiv { width: 200px; height: 200px; border: 2px solid black; opacity: 0; transition: opacity 1s; } <div id="myDiv"></div> <button onclick="showMe(1)">ShowData</button> <button onclick="showMe(100)">AnotherData</button>