[styled-components] keyframes 공통으로 사용하기

중복으로 사용되는 애니메이션을

스타일드 컴포넌트에서 공통으로 사용하기 위해서 작업해보았다.

 

공통으로 사용할 keyframes 생성

// theme/keyframes.ts

import { css, keyframes } from 'styled-components';

const showElementKeyframes = keyframes`
    0% {
        opacity: 0;
        transform: translateY(50%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
`;

export const animation = {
    showElement: (duration = '0.4s', delay = '0s') => css`
        animation: ${showElementKeyframes} ${duration} ${delay} forwards
            ease-out;
    `
};

 

보이지 않다가, 스크롤이 해당 요소쯤에 닿으면 아래에서 위로 올라오면서 나타나는 애니메이션을 하나 만들고

그 애니메이션을 여러 곳에서 쓸 수 있도록 공통으로 작업했다.

해당 애니메이션을 showElementKeyframes 라는 이름에 정의하고,

animation이라는 객체를 생성해서 showElement라는 함수에 해당 애니메이션을 생성하도록 했다.

duration이나 delay는 default값을 정해두긴 했지만, 변수로 받아서 유동적으로 사용할 수 있도록 했다.

 

개별 컴포넌트에서 적용

export const Content = styled.div`
    opacity: 0;
    transform: translateY(50%);
    ${animation.showElement('0.4s', '0.2s')}
`;

 

개별 컴포넌트에서 사용할 때는 해당 함수를 호출해주면 된다.

그리고 duration, delay등은 매개변수로 받을 수 있도록 해서 유동적으로 시간을 조절할 수 있게 했다.

 

 

참고

https://velog.io/@kimbangul/TypeScript-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%97%90%EC%84%9C-Styled-component-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EC%9E%AC%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0