Quiero que el tercer elemento ocupe el lugar del segundo elemento al hacer clic en el botón. Sé que puedo usar .remove() para eliminar ese bloque de código específico, pero no hará la transición, así que quiero que el tercer elemento lugar del segundo con transición en lugar de llegar directamente allí. ¿Cómo puedo hacer eso? Intento hacer el ejemplo pero cambiando la altura del segundo contenedor, pero el Contenido interno no cambió y tampoco hizo la transición a pesar de que configuré la transición en la altura.
const btn = document.getElementById('btn'); btn.addEventListener('click', () => { const all = document.querySelectorAll('.cont'); all[1].classList.add('changeheight'); }) .changeheight { height: 0px; transition: height 250ms ease; } <div class="cont"><h1>Hello 1</h1></div> <div class="cont"><h1>Hello 2</h1></div> <div class="cont"><h1>Hello 3</h1></div> <div class="cont"><h1>Hello 4</h1></div> <button id="btn"> Click </button> const btn = document.getElementById('btn'); btn.addEventListener('click', () => { const all = document.querySelectorAll('.cont'); all[1].classList.add('changeheight'); }) * { margin: 0; padding: 0; } .cont { height: 50px; } .changeheight { height: 0px; transition: height 350ms ease; } <div class="cont"> <h1>Hello 1</h1> </div> <div class="cont"> <h1>Hello 2</h1> </div> <div class="cont"> <h1>Hello 3</h1> </div> <div class="cont"> <h1>Hello 4</h1> </div> <button id="btn"> Click </button>Agregue overflow: hidden a la clase changeHeight y tome alguna idea de la respuesta de @CyrusKabir
const btn = document.getElementById('btn'); btn.addEventListener('click', () => { const all = document.querySelectorAll('.cont'); all[1].classList.add('changeheight'); }) * { margin: 0; padding: 0; } .cont { height: 50px; } .changeheight { height: 0px; transition: height 550ms ease; overflow: hidden; } <div class="cont"> <h1>Hello 1</h1> </div> <div class="cont"> <h1>Hello 2</h1> </div> <div class="cont"> <h1>Hello 3</h1> </div> <div class="cont"> <h1>Hello 4</h1> </div> <button id="btn"> Click </button>