[애플클론] styled-components 애니메이션 구현

styled-components의 keyframes 속성을 사용하여 상단 배너 애니메이션 효과를 구현하였다.

📌 스타일 컴포넌트 관련 이전 포스팅

⭐️ 사용한 컴포넌트명 & 작동 구조

• HeaderContent : 상단 고정, z-index값을 주어 맨 앞에 위치하도록 함
• RibbonContent : 애니메이션 효과가 적용되는 컴포넌트.
  transform: translateY 속성을 사용하여 HeaderContent 높이만큼 마이너스 값을 주어, HeaderContent와 같은 위치에 시작점을 두고, 아래로 내려오며 배경색과 폰트색상이 변화하도록 애니메이션 코드 작성

🖥 코드요약

// 애니메이션 css코드

const RibbonAnimation = keyframes`
  0% {
    transform: translateY(-48px);
    color: white;
    background-color: #0066cc;
  }
  30%{
    transform: translateY(0px);
    color: white;
    background-color: #0066cc;
  }
  100% {
    color: #1d1d1f;
    background-color: #f5f5f7;
  }
`;


// 애니메이션 적용

const RibbonContent = styled.div`
  width: 100%;
  height: 48px;
  background-color: ${props => props.theme.lightGray};
  animation: ${RibbonAnimation} 2.2s ease-in-out;

`;

🤔 문제점

HeaderContent의 배경에 투명도가 들어가있기 때문에, RibbonContent의 움직임이 비춰보였다. HeaderContent의 하단에서 깔끔하게(?) 내려오는 효과를 구현하기 위해, RibbonContent를 div로 감싸고, overflow: 'hidden' 속성을 주었다.

//기존 컴포넌트 구조

<HeaderContent />
<RibbonContent />
  

//수정 후
  
 <HeaderContent />
 <div style={{ overflow: 'hidden' }}>
   <RibbonContent />
 </div>

---

⭐️ 전체코드보기