Disney+ 사이트 클론 - 2

Nav메뉴에 애니메이션을 추가해볼건데 이 프로젝트에서는 css의 &:after를 이용할 것이다.
NavMenu의 스타일에

const NavMenu = styled.div`
...
    span {
      font-size: 13px;
      letter-spacing: 1.42px;

      &:after {
          content: "heyyyy";
          height: 2px;
      }
    }
  }
`;

이 코드를 추가하면

이렇게 뒤에 추가한 content인 heyyyy가 더해지는것을 확인할 수 있다.
하지만 지금 필요한 것은 text가 아닌 밑줄이다 따라서 position을 absolute로 지정한 높이 2px의 줄을 만들어주고 absolute position을 사용하기 위해 부모 요소인 span의 포지션을 relative로 지정해준다.

const NavMenu = styled.div`
...
    span {
      font-size: 13px;
      letter-spacing: 1.42px;
      position: relative;

      &:after {
        content: "";
        height: 2px;
        background: white;
        position: absolute;
        left: 0;
        right: 0;
        bottom: -6px;
      }
    }
  }
`;

밑줄이 잘 나타나지만 원하는건 마우스가 hover되었을때만 나타나는 것이다. 여기서 scaleX에 대해 알아보고 넘어가자

        transform: scaleX(0.5);

이 스타일을 추가하면

아까와 달리 밑줄이 요소의 50%만 차지하고 있고

        transform: scaleX(0);

0으로 바꾸면 0%만 차지하고 있다. 쉽게말해 x축의 scale을 제어하는 코드이다.

일단

        opacity: 0;

를 추가하여 숨겨두자.
그 뒤에

const NavMenu = styled.div`
  ...
        opacity: 0;
        transform: scaleX(0);
      }
    }

    &:hover {
      span:after {
        transform: scaleX(1);
        opacity: 1;
      }
    }
  }
`;

hover되었을 때의 코드를 추가해주면

지금도 괜찮긴 하지만 조금더 멋을 내고싶다.

      &:after {
        ...
        transform-origin: center;
        transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
        ...
      }

      &:after {
        ...
        transform-origin: letf center;
        transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
        ...
      }

transform-origin으로 애니메이션의 direction을 지정할 수 있다.

이것으로 헤더는 마무리짓도록 하고 다음엔 홈 화면을 만들어보자