Intersection Observer API로 CSS 애니메이션 향상

8107 단어 codenewbiejavascripttutorialwebdev
CSS 애니메이션은 🍑에서 고통스러울 수 있으며, 가장 나쁜 것은 정확한 순간에 애니메이션을 트리거하는 것입니다. 그 정확한 이유와 내가 당신에게 완벽하게 정직할 수 있다면, 나는 대부분의 시간에 그것들을 사용하지 않기로 선택합니다. 하지만...

발표: Intersection Observer API



시작하기 전에 API에 대한 복습이 필요한 경우 this에 대한 정보를 얻을 수 있는 좋은 곳입니다.

당신은 내가 CSS 애니메이션을 위해 API를 사용해야 한다고 제안한 것이 제정신이 아니라고 생각할지 모르지만 내 말을 들어보세요... GitHub 홈페이지를 더 성능과 속도를 높이는 데 사용하므로 좋은 것임을 알 수 있습니다!

일반적으로 창에서 요소의 위치를 ​​확인하려는 경우 elem.clientTop, elem.offsetTop 또는 elem.getBoundingClientRect()와 같은 항목을 사용하게 될 수 있지만 사실은 이러한 속성/메서드가 브라우저에서 필요한 스타일을 계산하도록 트리거하고 성능 병목 현상을 일으키는 레이아웃(이를 대상으로 하는 속성의 전체 목록과 추가 설명here 확인)을 참조하십시오.

이를 우회하는 방법은 Intersection Observer API을 사용하는 것입니다. MDN 문서에 따르면 '대상 요소와 상위 요소 또는 최상위 문서의 뷰포트와의 교차점에서 변경 사항을 비동기식으로 관찰하는 방법을 제공합니다.' . 따라서 기본적으로 요소가 다른 요소/뷰포트에 들어가고 나가는지 모니터링하고 브라우저에서 처리하기가 훨씬 쉽습니다.

그래서... 어떻게 하죠?



IntersectionObserver interface은 매우 쉽게 만들 수 있으며 콜백과 일부 옵션을 전달하기만 하면 됩니다. 콜백은 IntersectionObserverEntry 객체 목록에 어떤 일이 일어날지 결정하는 것이며 옵션을 통해 콜백이 호출되는 상황을 제어할 수 있습니다(자세한 내용은 MDN documentation 참조).

예를 들어, 옵션을 정의하지 않고(일부 기본값을 채택하게 됨) 단순히 콜백으로 작업하므로 초기 설정은 다음과 같습니다.

let expansionObserver = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.intersectionRatio > 0) {
        // something here
    } else {
        // something here
    }
  });
});


이제 확장 관찰자가 있으므로 애니메이션을 적용할 요소를 가져와야 합니다. 이를 위해 document.querySelectorAll() 를 사용하고 클래스 .expand 의 모든 요소를 ​​가져옵니다.

따라서 HTML에서는 다음과 같이 보일 것입니다.

<body>
    <div id="section-one"></div>
    <div id="section-two">
      <div id="container">
        <h1 class="expand">Hello</h1>
      </div>
    </div>
</body>


그리고 우리의 자바스크립트는 다음과 같을 것입니다:

const elementsToExpand = document.querySelectorAll(".expand");


그런 다음 IntersectionObserver 이러한 요소를 원한다고 observe 알려야 하고 querySelectorAll()를 사용하고 있으므로 elementsToExpand 반복해야 하고 forEach() 이를 사용합니다.

elementsToExpand.forEach((element) => {
  expansionObserver.observe(element);
});


JavaScript 부분을 완료하려면 콜백에 작성한 if/else 문을 채워야 합니다. 여기에서 애니메이션으로 elementsToExpand 스타일을 지정해야 합니다.

let expansionObserver = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.intersectionRatio > 0) {
      entry.target.style.animation = `expansion 2s ease-in-out`;
    } else {
      entry.target.style.animation = "none";
    }
  });
});


따라서 이것은 다시 생성해야 하는 전체 동작이며 이제 CSS에서 다음expansion 애니메이션을 정의하기만 하면 됩니다.

@keyframes expansion {
  from {
    transform: scaleY(0.1);
  }
  to {
    transform: scaleY(1);
  }
}


그리고 우리는 끝났습니다! 이제 전체 예제 미리보기를 확인하고 CodeSandbox에서 그것을 가지고 놀 수 있습니다! 나는 당신이 무슨 일이 일어나고 있는지 완전히 이해할 수 있도록 다른 애니메이션으로 추가 요소를 추가했습니다! 😄

그리고 그게 다야!


Intersection Observer API에 대해 어떻게 생각 했습니까? 차기작에 도전해보시겠어요?
이 게시물에 대해 어떻게 생각했는지 알려주시고 언제든지 저를 팔로우하세요 🤘
고루틴
Noob용 Vinyl을 사용하여 Haskell에서 확장 가능한 레코드

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage