Tengo un div que colapsa al hacer clic en un botón. Codifique de la siguiente manera:
const collapse = () => { const title = document.getElementById('title'); title.classList.add('d-none'); const out = document.getElementById('out'); out.classList.add('collapse'); } .out { width: 200px; background-color: grey; display: flex; justify-content: space-between; } .d-none { display: none; } .collapse { width: 65px; } .btn { width: 65px; } <div id='out' class='out'> <span id='title'>Title</span> <button class='btn' onclick='collapse()'>Collapse</button> </div>Me gustaría agregar un efecto de transición, de modo que el div colapsara sin problemas, el botón se movería suavemente hacia el extremo izquierdo con el colapso del div. ¿Cómo puedo hacer eso?
EDITAR Es posible que no haya entendido cuál es el resultado previsto. Si comenta aquí lo que le gustaría que hiciera, puedo hacer que se alinee más correctamente. :)
He agregado un ejemplo con lo que tiene, pero recomendaría simplemente agregar y eliminar una clase según el estado.
Básicamente, simplemente cambia el nombre de la clase 'colapsar' y agrega propiedades de transition a la clase div, así como a la clase colapsada. Puedes ver el código a continuación:
const collapse = () => { const out = document.getElementById('out'); // We only have to toggle the collapse class out.classList.toggle('collapse'); } .out { width: 200px; background-color: grey; display: inline-block; /* This transition happens when the collapse is removed */ transition: all 300ms ease-in-out; } .d-none { height: 0; } .collapse { width: 0; /* This transition happens when the collapse class is added */ transition: all 300ms ease-in-out; } .btn { width: auto; margin-left: -5px; } <div id='out' class='out'> <span id='title'>Title</span> </div> <button class='btn' onclick='collapse()'>Collapse</button>