Styled Components에서 keyframes의 prop이 작동하지 않을 때 해결 방법

styled componets의 컴포넌트 안에 애니메이션을 위한 keyframes 코드를 넣으면 잘 작동한다.

 

const StyledContainer = styled.div`
  @keyframes slidein {
    from {
      margin-left: 100%;
      width: 300%;
    }

    to {
      margin-left: 0%;
      width: 100%;
    }
  }
`;

 

그러나 keyframes 안의 값을 바꿔야 할 일이 생겼을 때 잘 작동하지 않는 문제가 생겼다.

위 방식이 정상적인 방법이 아니기 때문이다.

styled components에서 keyframes를 사용하려면 아래와 같이 해야 한다.

 

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

const moveRight = (width: number) => keyframes`
  from {
    transform: translateX(-${width}px);
  }
  to {
    transform: translateY(0);
  }
`;

const StyledSliderItems = styled.div<{
  width: number;
}>`
  animation: 1s linear ${props => moveRight(props.width)} forwards;
`;

 

keyframes를 styled components에서 import해서 밖으로 꺼내 함수로 만든다.

moveRight의 파라미터인 width를 보면 알 수 있듯이 keyframes 값을 수정할 수 있고

이렇게 keyframes를 밖으로 빼니 width라는 prop이 바뀔 때마다 정상 작동하는 것을 확인했다.