Estoy intentando cuando hago clic en un modal para tener una animación para mostrar el modal, pero no logro hacerlo usando Tailwind y reaccionar.
Aquí está mi código:
import React, { useState, useCallback } from "react"; import ReactDOM from "react-dom"; import Wrapper from "./Wrapper"; import Input from "./Input"; import "./styles.css"; import Button from "./Button"; import Modal from "./Modal"; function App() { const [showModal, setShowModal] = useState(false); const handleShowModal = useCallback(() => { setShowModal(!showModal); }, [showModal]); const handleCloseModal = useCallback(() => { setShowModal(false); }, []); return ( <div className="p-4"> <h1 className="text-red-500 text-center">PlayGround</h1> <Wrapper className="p-2"> <Input /> </Wrapper> <Wrapper className="p-2"> <Button onClick={handleShowModal}>Show Modal</Button> {showModal && <Modal onCancel={handleCloseModal} />} </Wrapper> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);Y puedes ver mi código completo aquí:
me gustaria algo asi:
Cómo puedo hacer eso ?
Muchos gracias !
Recomiendo usar interfaz de usuario sin cabeza
puedes usar así
import { Transition } from '@headlessui/react' import { useState } from 'react' function MyComponent() { const [isShowing, setIsShowing] = useState(false) return ( <> <button onClick={() => setIsShowing((isShowing) => !isShowing)}> Toggle </button> <Transition show={isShowing} enter="transition-opacity duration-75" enterFrom="opacity-0" enterTo="opacity-100" leave="transition-opacity duration-150" leaveFrom="opacity-100" leaveTo="opacity-0" > I will fade in and out </Transition> </> ) }