Sungtt

styled component keyframes 변수,props 사용하기 본문

React

styled component keyframes 변수,props 사용하기

sungtt 2022. 10. 24. 01:14 
const moveVertically = (y) => keyframes`
    0% {
        transform : translateY(0px) 
    }
    100% {
        transform : translateY(${y}px)
    }
`;

const BallAnimation = styled.g`
    animation : ${props => moveVertically(props.y)} ${props => props.time}s linear
`;

키프레임 생성 시 인자를 받아서 호출하고,

컴포넌트에서는 애니메이션 호출 시 props값을 넘기면 된다.

'React' 카테고리의 다른 글

[styled-components] React does not recognize the `ButtonBG` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `buttonbg` instead. If you accidentally passed it from a parent component, ..  (0) 2022.12.05
socket.io를 통한 현재 접속자 구현하기  (0) 2022.12.03
스타일드컴포넌트 as의 value를 props로 전달할 때 오류  (0) 2022.09.08
You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1)  (0) 2022.05.08
s3 특정 확장자만 업로드하기  (0) 2022.05.04
'React' Related Articles more
Comments