He creado un cuadro para alternar entre aparecer y desaparecer a través de un botón de alternancia.
Los problemas son:
No soy un experto en la web. Todo lo que he escrito es lo que he obtenido de diferentes lugares y reunido. Siéntase libre de corregir cualquier otro error de CSS/JS también. Pero los problemas anteriores son lo que estoy buscando principalmente.
function toggle_elem() { var elem = document.getElementById('elemid'); if(elem.style.display == 'none') { elem.style.display = 'block'; window.setTimeout(function(){ elem.style.opacity = 1; elem.style.transform = 'scale(1)'; elem.style.height = '100px'; },0); } else { elem.style.transform = 'scale(0)'; window.setTimeout(function(){ elem.style.display = 'none'; elem.style.height = '0'; }, 300); } } #elemid { border: 1px solid black; opacity: 0; transform: scale(0); transition: height 0.3s, width 0.3s, padding 0.3s, visibility 0.3s, 0.3s ease opacity, opacity 0.3s ease-out, 0.3s ease transform; } <div> <button onclick="toggle_elem()">Toggle</button> </div> <div id="elemid" style="display:none">aaaaa</div> <div> <button >Next button</button> </div>Ya casi estás allí para la transición suave en la animación que desaparece. Lo unico que tienes que modificar es esto
elem.style.transform = 'scale(0)'; //this is to support the css animation elem.style.height = '0'; //move your height set outside of `setTimeout` window.setTimeout(function(){ //only set `display` none after the animation completed elem.style.display = 'none'; }, 300);código completo
function toggle_elem() { var elem = document.getElementById('elemid'); if (elem.style.display == 'none') { elem.style.display = 'block'; window.setTimeout(function() { elem.style.opacity = 1; elem.style.transform = 'scale(1)'; elem.style.height = '100px'; }, 0); } else { elem.style.transform = 'scale(0)'; elem.style.height = '0'; window.setTimeout(function() { elem.style.display = 'none'; }, 300); } } #elemid { border: 1px solid black; opacity: 0; transform: scale(0); transition: height 0.3s, width 0.3s, padding 0.3s, visibility 0.3s, 0.3s ease opacity, opacity 0.3s ease-out, 0.3s ease transform; } <div> <button onclick="toggle_elem()">Toggle</button> </div> <div id="elemid" style="display:none">aaaaa</div> <div> <button>Next button</button> </div>