WAAPI를 사용하여 세부 사항 요소를 애니메이션하는 방법

웹 애니메이션 API를 사용하여 기본적으로 사용하십시오<details></details> 요소의 애니메이션 효과

웹 사이트에서 가장 일반적인 애니메이션 요구 사항 중 하나는 아코디언 스타일 확장 및 마감 효과입니다. 흥미롭게도 JQuery의 slideDown() 기능은 2006 년 첫 버전으로 이미 존재했습니다.

이 기사는 웹 애니메이션 API를 기본으로 사용하는 방법을 설명합니다.<details></details> 애니메이션 요소.

HTML 구조

먼저이 애니메이션을 구현하는 데 필요한 HTML 태그 구조를 살펴 보겠습니다.

<details></details> 요소에는 하나가 필요합니다<summary></summary> 요소.<summary></summary> 아코디언이 접 히면 눈에 띄는 것입니다.<details></details> 내의 다른 모든 요소는 아코디언 내부의 내용의 일부입니다. 애니메이션 효과의 구현을 용이하게하기 위해 우리는 그것들을 하나로 랩합니다.

가운데.

<details>
  <summary>아코디언 제목</summary>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet, censertur apisicing elit. modi unde, ex rem voluptates autem aliquid veniam quis temporibus repudiandae illo, nostrum, pariatur que! Animi modi dignissimos에서 voluptatum에서 voluptatum에서!
    </p>
  </div>
</details>

아코디언 클래스

코드의 재사용 성을 향상 시키려면 아코디언 클래스를 만들어야합니다. 이런 식으로 우리는 모든 것을 사용할 수 있습니다<details></details> 요소에서 new Accordion() 에게 전화하십시오.

 클래스 아코디언 {
  생성자 (el) {}
  onclick (e) {}
  수축 () {}
  열려 있는() {}
  확장하다() {}
  OnanimationFinish (Open) {}
}

constructor()

생성자는 각 아코디언에 필요한 데이터를 저장하는 데 사용됩니다.

 생성자 (el) {
  this.el = el;
  this.summary = el.QuerySelector ( 'Summary');
  this.content = el.querySelector ( '. content');
  this.animation = null;
  this.isclosing = false;
  this.isexpanding = false;
  this.summary.addeventListener ( 'click', (e) => this.onclick (e));
}

onClick()

onClick() 함수에서 요소가 애니메이션인지 (근접 또는 확장)인지 확인합니다. 요소가 애니메이션되는 동안 사용자가 아코디언을 클릭하면이 점검을 수행해야합니다. 클릭 속도가 너무 빠르면 아코디언이 완전히 확장에서 완전히 닫힌까지 점프하기를 원하지 않습니다.<details></details> 요소가 열리면 브라우저가 open 속성을 추가합니다. 우리는이 속성의 가치를 this.el.open 을 통해 얻을 수 있습니다.

 onclick (e) {
  e.preventDefault ();
  this.el.style.overflow = 'Hidden';
  if (this.isclosing ||! this.el.open) {
    this.open ();
  } else if (this.isexpanding || this.el.open) {
    this.shrink ();
  }
}

shrink()

이 shrink() 함수는 waapi의 .animate() 함수를 사용합니다. 자세한 내용은 MDN 문서를 읽을 수 있습니다. WAAPI는 CSS @keyframes 와 매우 유사합니다. 애니메이션의 시작 및 끝 키 프레임을 정의해야합니다. 이 예에서는 두 개의 키 프레임 만 필요합니다. 첫 번째는 요소의 현재 높이이고 두 번째는 아코디언이 닫힌 후 높이입니다. 현재 높이는 startHeight 변수에 저장됩니다. 가까운 높이는 endHeight 변수에 저장됩니다.<summary></summary> 키.

 수축 () {
  this.isclosing = true;
  const startheight =`$ {this.el.offsetheight} px`;
  const endheight =`$ {this.summary.offsetheight} px`;
  if (this.animation) {
    this.animation.cancel ();
  }
  this.animation = this.el.animate ({{
    높이 : [Startheight, Endheight]
  }, {
    기간 : 400,
    EASE : 'Ease-Out'
  });
  this.animation.onfinish = () => this.onAnimationFinish (false);
  this.animation.oncancel = () => this.isclosing = false;
}

open()

open() 함수는 아코디언을 확장하려고 할 때 호출됩니다. 이 기능은 현재 아코디언 애니메이션을 제어하지 않습니다. 먼저, 우리는 계산합니다<details></details> 요소의 높이는 인라인 스타일을 사용하여 요소에 적용합니다. 일단 완료되면, 우리는 open 속성을 설정하여 컨텐츠를 가시적으로 설정할 수 있지만, overflow: hidden 고정 높이를 설정하더라도 콘텐츠는 여전히 숨겨져 있습니다. 그런 다음 다음 프레임이 expand() 함수를 호출하고 요소에 대한 애니메이션을 만듭니다.

 열려 있는() {
  this.el.style.height =`$ {this.el.offsetheight} px`;
  this.el.open = true;
  window.requestanimationFrame (() => this.expand ());
}

expand()

expand() 함수는 shrink() 함수와 유사하지만 현재 높이에서 가까운 높이까지의 애니메이션은 아니지만 요소 높이에서 끝 높이까지. 끝 높이는 동일합니다<summary></summary> 높이와 내부 컨텐츠의 높이.

 확장하다() {
  this.isexpanding = true;
  const startheight =`$ {this.el.offsetheight} px`;
  const endheight =`$ {this.summary.offsetheight this.content.offsetheight} px`;
  if (this.animation) {
    this.animation.cancel ();
  }
  this.animation = this.el.animate ({{
    높이 : [Startheight, Endheight]
  }, {
    기간 : 400,
    EASE : 'Ease-Out'
  });
  this.animation.onfinish = () => this.onAnimationFinish (true);
  this.animation.oncancel = () => this.isexpanding = false;
}

onAnimationFinish()

이 기능은 애니메이션이 무너 지거나 확장 될 때 호출됩니다. 보시다시피, 아코디언이 켜질 때 true 로 설정된 매개 변수가 open 므로 더 이상 브라우저에서 처리되지 않으므로 요소에 open HTML 속성을 설정할 수 있습니다.

 OnanimationFinish (Open) {
  this.el.open = 열기;
  this.animation = null;
  this.isclosing = false;
  this.isexpanding = false;
  this.el.style.height = this.el.style.overflow = '';
}

아코디언을 설정하십시오

우리는 대부분의 코드를했습니다!

남은 것은 각 HTML에 대한 것입니다<details></details> 요소는 아코디언 클래스를 사용합니다. 이를 위해 우리는 사용합니다<details></details> 태그의 querySelectorAll 및 각 요소에 대한 새 아코디언 인스턴스를 만듭니다.

 document.querySelectorall ( 'details'). foreach ((el) => {
  새로운 아코디언 (EL);
});

알아채다

가까운 높이와 열린 높이를 계산하려면<summary></summary> 항상 내용과 같은 높이를 가지고 있습니다.

예를 들어, 시도하지 마십시오<summary></summary> 애니메이션 프로세스 중에 점프를 유발할 수 있으므로 켜지면 패딩을 추가하십시오. 내부 컨텐츠도 마찬가지입니다. 높이가 고정되어 있어야하며 애니메이션을 열 때 높이 변경되는 내용을 피해야합니다.

또한하지 마십시오<summary></summary> 높이 키 프레임을 계산하지 않으므로 내용 사이에 여백을 추가하십시오. 대신 컨텐츠에 직접 패딩을 사용하여 간격을 추가하십시오.

요약

그것이 바로 라이브러리없이 JavaScript를 사용하여 아름다운 아코디언 애니메이션을 만들었습니다!

이미지 경로 /uploads/20250331/174338369667e9ec90190a3.jpg 는 실제 이미지 경로로 대체해야합니다. 이미지 파일에 액세스하거나 처리 할 수 ​​없으므로 원래 형식 만 유지할 수 있습니다.

위 내용은 WAAPI를 사용하여 세부 사항 요소를 애니메이션하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!