Mi objetivo es crear una animación al mostrar y ocultar un elemento HTML. Mostrar y ocultar se activa mediante un botón que alterna una clase oculta.
Aquí está mi código:
const button = document.querySelector('button'); const box = document.querySelector('.box'); button.addEventListener('click', () => { box.classList.toggle('hide'); }) .box { width:200px; height: 200px; border: 1px solid #000; background-color: gray; margin: 0 auto; opacity: 1; display: block; } .hide { display: none; transition: all 1s ease-out; opacity: 0; } <button>Show / Hide</button> <div class="box hide"></div>Si desea usar animaciones, no use display:none , puede usar visibility
const button = document.querySelector('button'); const box = document.querySelector('.box'); button.addEventListener('click', () => { box.classList.toggle('hide'); }) .box { width:200px; height: 200px; border: 1px solid #000; background-color: gray; margin: 0 auto; opacity: 1; transition: all 1s ease-out; visibility: visible; } .hide { visibility: hidden; transition: all 1s ease-out; opacity: 0; } <button>Show / Hide</button> <div class="box hide"></div>simplemente elimine la display: block de su ocultación y, si desea que la animación se div, agregue la animación también:
const button = document.querySelector('button'); const box = document.querySelector('.box'); button.addEventListener('click', () => { box.classList.toggle('hide'); }) .box { width:200px; height: 200px; border: 1px solid #000; background-color: gray; margin: 0 auto; opacity: 1; transition: all 1s ease-out; display: block; } .hide { transition: all 1s ease-out; opacity: 0; } <button>Show / Hide</button> <div class="box hide"></div>