animation-react
v1.2.6
Published
Fade, Text 애니메이션을 React에서 사용할 수 있게 구현한 라이브러리입니다.
Downloads
4
Maintainers
Readme
animation-react
Fade, Text 애니메이션을 React에서 사용할 수 있게 구현한 라이브러리입니다.
Demo
Install
npm install animation-react
# or
yarn add animation-react
Simple Usage
Fade
return (
<Fade type="left" delay={1} duration={1} isRepeat={false} translate="100px">
<div>// Your Code</div>
</Fade>
);
props
type : Fade 유형 ( default : "opacity" ) [ opacity, top, bottom, left, right ]
delay : 이벤트 실행 대기 시간 ( default : 1, unit : s )
duration : 이벤트 진행 시간 ( default : 1, unit : s )
isRepeat : 반복 설정 ( default : false )
translate : Fade 이동 거리 ( default : "100px" )
Text
return (
<Text
value="Hello! World!"
type="slide"
isRepeat={true}
option={{ translate: "translateX(100px)" }}
/>
);
props
type : Text Animation 유형 ( default : "opacity" ) [ opacity, underline, slide, drop ]
delay : 이벤트 실행 대기 시간 ( default : 1, unit : s )
duration : 이벤트 진행 시간 ( default : 1, unit : s )
isRepeat : 반복 설정 ( default : false )
option : 이벤트 옵션 ( default : {} )
option as underLine : {
background: "red",
height: "10px",
}
option as slide : {
translate: "translateX(100px)"
}