Esta podría ser una pregunta muy básica, pero estoy tratando de descubrir cómo mover un div cuando un usuario hace clic en un botón. En mi caso, quiero que una barra blanca en la parte inferior de una página se mueva hacia abajo cuando un usuario haga clic en el botón.
const [movepos, setMovepos] = useState("0") return ( <> <div style={{ position: "absolute", width: "100%", height: "60px", bottom: {movepos}, zIndex: "10000000000", boxShadow: "box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px", backgroundColor: "white" }} className="media-player-bar"></div> <button onClick={() => setMovepos(movepos==="0" ? "-60px" : "0")}className="test-button">Click me</button> </> )Al configurar 0 o -60px para la parte inferior, está en la posición correcta, pero cuando lo hago de esta manera, simplemente lo coloca en la parte superior y el botón no hace nada. ¿Hay otra forma de lograr lo que quiero o me estoy perdiendo algo?
Hay muchas formas de obtener el resultado deseado, mostraré dos de ellas aquí:
const [style, setStyle] = useState('top: 0px') agregue clic para el botón como este: <button onClick={() => setStyle('top: '100px')/>Click me</button> . ahora pase el estilo a su elemento de barra: <YourBar style={style}/> esto moverá el elemento pero puede romper la página de la interfaz de usuario. así que tendrás que jugar un poco con él, tal vez haciendo que la position: absolute;
const [showTop, setShowTop] = useState(true);y hacer así: `
<div> <button onClick={() => setTop(false)}>Click Me</button> {showTop && <YourBar />} ... {!showTop && <YourBar /> </div>`con eso puede asegurarse de que se colocará en el lugar correcto y no romperá la interfaz de usuario.
Vale la pena mencionar que al eliminar un elemento de DOM, también eliminará su altura y la página subirá a la misma cantidad que el elemento que se eliminó. si desea mantener la altura del elemento, use css para visibilidad/opacidad o envuelva su barra con un div y establezca la altura que desea y simplemente oculte la barra dentro de ella.