Estoy tratando de crear una animación deslizante solo usando CSS. JavaScript se usa solo para alternar el estado abierto/cerrado del elemento.
Puedo usar transformaciones CSS translated y rotateX para ocultar/mostrar el menú. Pero esas técnicas no reducen/aumentan la altura del elemento y, por lo tanto, el elemento principal no sigue la altura de los elementos secundarios.
Quiero poder deslizar hacia arriba/abajo un elemento dentro de su padre, mientras que el padre también se contrae y se expande. Y quiero hacer esto usando transiciones para que se muestre una animación de deslizamiento hacia arriba/abajo.
Aquí está mi caja de códigos
agregue una clase para abrir y cerrar, luego cambie la clase con js usando yourclass.classList.toggle(classname) su sandbox actualizado https://codesandbox.io/s/xenodochial-benji-boil1b?file=/index.html
Recomendaría usar una transformación: traducir y cambiar el diseño de la barra de navegación
#parent { overflow-y: hidden; } #slide { background: gray; z-index: 30; position: relative; } #slideMenu { transform: translateY(-100%); overflow: hidden; z-index: -1; transition: 1s transform ease-in; position: relative; } #slideMenu.open { transform: translateY(0); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Static Template</title> </head> <body> <div id="parent"> <div id="slide"> <button>sldie</button> </div> <div id="slideMenu"> <div>item 1</div> <div>item 2</div> <div>item 3</div> <div>item 4</div> <div>item 5</div> </div> </div> <script> var slideMenu = document.querySelector("#slideMenu"); var slide = document.querySelector("#slide"); document.addEventListener("click", (e) => { if (slideMenu.classList.contains("open")) { slideMenu.classList.remove("open"); } else { slideMenu.classList.add("open"); } }); </script> </body> </html>