Symbol

Default

import { Transition } from '@shinyongjun/react-transition'; export default function Example() { const [show, setShow] = useState<boolean>(false); return ( <> <button type="button" onClick={() => setShow(!show)}> Example Toggler </button> <Transition show={show}> <div className="example"></div> </Transition> </> ) }
.default-enter-active, .default-leave-active { transition: all 500ms; } .default-enter-from, .default-leave-to { transform: translateX(20px); opacity: 0; }

Name

import { Transition } from '@shinyongjun/react-transition'; export default function Example() { const [show, setShow] = useState<boolean>(false); return ( <> <button type="button" onClick={() => setShow(!show)}> Example Toggler </button> <Transition show={show} name="custom"> <div className="example"></div> </Transition> </> ) }
.custom-enter-active, .custom-leave-active { transition: all 500ms; } .custom-enter-from, .custom-leave-to { transform: translateY(20px); opacity: 0; }