Me gustaría agregar una animación a los botones de abajo.
Al mostrar los botones: los botones deben aumentar lentamente de tamaño hasta que se muestren por completo.
Al esconderse: deben hacerse más pequeños lentamente hasta que salgan de la página.
¿Cómo obtengo esto con css?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .btn { transition: 1s; /* Continue coding here */ } </style> </head> <body> <div class="container"> <button class="btn" id="q1" onclick="show()">B1</button> <button class="btn" id="q2" hidden>B2</button> <button class="btn" id="q3" hidden>B2</button> </div> </body> </html> <script> function show() { document.getElementById("q1").remove(); document.getElementById("q2").removeAttribute("hidden"); document.getElementById("q3").removeAttribute("hidden"); } </script>Para animar el tamaño, debe establecer los tamaños inicial y final. Recomendaría usar una clase .hidden en lugar del atributo oculto. La clase tendrá un tamaño cero, mientras que la clase base .btn tiene los estilos para un botón no oculto. Luego, solo necesita eliminar la clase para activar la transición.
function show() { document.getElementById("q1").remove(); document.getElementById("q2").classList.remove("hidden"); document.getElementById("q3").classList.remove("hidden"); } .btn { transition: all 1s; width: 4em; height: 2.5em; padding: 0.5em; /* to hide the text when hidden */ overflow: hidden; } .btn.hidden { width: 0; height: 0; padding: 0; } <div class="container"> <button class="btn" id="q1" onclick="show()">B1</button> <button class="btn hidden" id="q2">B2</button> <button class="btn hidden" id="q3">B3</button> </div>Use una animación de keyframe que se establece en una función que se agrega o elimina cuando se hace clic en el botón.
ejemplo: https://jsfiddle.net/93ah2ej5/1/
(al hacer clic en uno de los botones B2, se ocultan y se muestra el botón B1)
q1 = document.getElementById("q1") q2 = document.getElementById("q2") q3 = document.getElementById("q3") function show() { q1.classList.add('hide'); setTimeout(function() { document.getElementById("q1").hidden = true; document.getElementById("q2").removeAttribute("hidden"); document.getElementById("q3").removeAttribute("hidden"); q2.classList.remove('hide') q3.classList.remove('hide') q2.classList.add('show') q3.classList.add('show') }, 3000) } function hide() { q2.classList.add('hide') q3.classList.add('hide') setTimeout(function() { q2.hidden = 'true' q3.hidden = 'true' q1.hidden = false q1.classList.add('show') q1.classList.remove('hide') }, 3000) } @keyframes show { 0% { opacity: 0; width: 10px; height: 10px } 100% { opacity: 1; width: 32px; height: 21.5px; } } .show { animation-name: show; animation-duration: 3s; } @keyframes hide { 0% { opacity: 1; width: 32px; height: 21.5px; } 100% { opacity: 0; width: 10px; height: 10px } } .hide { animation-name: hide; animation-duration: 3s; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="container"> <button class="btn" id="q1" onclick="show()">B1</button> <button class="btn" id="q2" hidden onclick='hide()'>B2</button> <button class="btn" id="q3" hidden onclick='hide()'>B2</button> </div> </body> </html>Aquí hay una manera.
const button = document.querySelector(`.button`); const showHide = document.querySelector(`.show-hide-button`); let isHidden = true; showHide.addEventListener(`click`, () =>{ if(isHidden === true) { setTimeout(()=>{ button.style.width = `50px`; }, 100); setTimeout(()=>{ button.style.display = `none`; }, 1000); } else { setTimeout(()=>{ button.style.display = `block`; }, 100); setTimeout(()=>{ button.style.width = `150px`; }, 150); } isHidden = !isHidden; }); .button{ margin-top: 10px; width: 150px; display: block; transition: 1s; }; <div> <button class="show-hide-button">ShowHide</button> <button class="button">Button</button> </div>