TIL) 스파르타 개발일지 23-03-07

지난 시간에는 랜딩 페이지의 애니메이션을 실행시키기 위하여, 스크롤 이벤트를 활용하려했지만. 그로 인해서 스크롤 시 이벤트가 계속해서 발생하여 전체적으로 부하, 쓰로틀링 등 최적화 되지않은 상태를 야기하였다. 

 

그를 해결하기 위해 () 를 사용하였고, 그 결과 코드는 아래와 같다.

 

초기 문제로는 isAnimated 의 값이 정상적으로 true가 되지만 이미지의 애니메이션은 새로고침시 작동하는 문제가 있었다.

코드에서 애니메이션이 useEffect로 인해 isAnimated의 값이 true로 변경되면, 해당 컴포넌트의 className 속성에 "animated" 값을 추가하는 것으로 애니메이션 효과를 적용하고 있었고,

 

이를 해결하기위해서 styled-components로 작성한 CSS 코드에서 ".animated" 클래스를 가진 img 태그에 대한 애니메이션 효과를 적용시키도록하여, ".animated" 클래스에 대한 CSS 코드를 작성했다.

  리펙토링 전
  
  img {
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
  }

  img:nth-child(1) {
    animation: fadeInUp 1s ease forwards;
    animation-delay: 0.5s;
  }

  img:nth-child(3) {
    animation: fadeInUp 1s ease forwards;
    animation-delay: 1s;
  }

  img:nth-child(2) {
    animation: fadeInUp 1s ease forwards;
    animation-delay: 1.5s;
  }

  img.animated {
    opacity: 1;
    animation: fadeInUp 1s ease forwards;
  }

  @keyframes fadeInUp {
    from {
      transform: translateY(20%);
      opacity: 0;
    }
    to {
      transform: translateY(0);

리펙토링 후

  img {
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
  }

  img.animated {
    animation: fadeInUp 1s ease forwards;
  }

  img:nth-child(1) {
    animation-delay: 0.5s;
  }

  img:nth-child(3) {
    animation-delay: 1s;
  }

  img:nth-child(2) {
    animation-delay: 1.5s;
  }

  @keyframes fadeInUp {
    from {
      transform: translateY(20%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
`;