Symbol

name

className의 namespace를 설정합니다.
  • component : <Transition />
  • required : false
  • type : string
  • default : 'default'

예제

import { Transition } from '@shinyongjun/react-transition'; import { useState } from 'react'; export default function App() { const [show, setShow] = useState(false); return ( <div> <button type="button" onClick={() => setShow(!show)}> Animation Toggler </button> <Transition show={show} name="custom"> <div>Animation</div> </Transition> </div> ); }
.custom-enter-active, .custom-leave-active { transition: all 1s ease-in; } .custom-enter-from, .custom-leave-to { transform: translateX(20px); opacity: 0; }