Tengo este componente donde hay un botón y un div que contiene un elemento de entrada. Cuando se hace clic en el botón, se supone que el div se desliza hacia abajo abriendo el contenedor y muestra el campo de entrada y si se vuelve a hacer clic, se cerrará deslizándose hacia arriba.

En este momento, cuando se hace clic en el botón, funciona de manera opuesta. Eso es abrir deslizando hacia arriba pero cerrar deslizando hacia abajo.

Estoy usando las propiedades max-height y will-change css para que funcione. ¿Cómo puedo arreglarlo?

Aquí está el CodeSandbox .

Aquí está el componente:

 import { useState } from "react"; import "./styles.css"; export default function App() { const [ isOpen, setIsOpen ] = useState( false ); const handleOpen = () => { setIsOpen( !isOpen ); }; return ( <div className="App"> <button onClick={handleOpen}>Open</button> <div className={`container ${isOpen ? "containerOpened" : "containerClosed"}`}> <input type="text" /> </div> </div> ); }

Aquí está el CSS:

 .App { font-family: sans-serif; text-align: center; position: relative; } .container { position: absolute; bottom: -46px; right: 0; margin-right: 30px; padding: 10px 20px; background: #fff; border: 1px solid #e2e2e2; transition: all 0.3s ease-in-out; } .containerClosed { overflow: hidden; max-height: 0; transition: all 0.3s ease; will-change: transform; } .containerOpened { max-height: 100px; overflow: hidden; transition: all 0.3s ease; will-change: transform; } .container input { border: none; outline: none; border-bottom: 1px solid #e2e2e2; width: 200px; }

Tenga en cuenta que necesito usar un posicionamiento absoluto, así como un margen de relleno para el contenedor.