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;
}