요소로 전환 전환하는 방법

HTML <details> 요소는 확장 및 축소 가능한 콘텐츠 섹션을 만드는 간단한 방법을 제공합니다. 원활한 CSS 전환으로 이 기능을 향상시키는 방법을 살펴보고 CSS 단독 사용의 한계를 해결해 보겠습니다.

기본 <details> 구현은 다음과 같습니다.

<code class="language-html"><details>
  <summary>Click to expand</summary>
  <p>This is the content.</p>
</details></code>

이 방법은 효과가 있지만 CSS만 사용하여 부드러운 전환을 추가하는 것은 어려운 일입니다. 예를 들어 다음 CSS는 원하는 효과를 생성하지 않습니다.

<code class="language-css">details#my-details {
  transition-duration: 300ms;
}</code>

원활한 토글 전환을 위해서는 JavaScript가 필요합니다.

솔루션

핵심은 <details> 요소 내의 콘텐츠를 다른 요소(여기서는 <div>)로 래핑하는 것입니다. 이를 통해 콘텐츠를 별도로 타겟팅하고 애니메이션을 적용할 수 있습니다.

<code class="language-html"><details id="my-details">
  <summary>Click to expand</summary>
  <div>
    <p>This is the content.</p>
  </div>
</details></code>

다음 JavaScript 코드는 애니메이션을 처리합니다.

<code class="language-javascript">const details = document.getElementById("my-details");
const summary = details.firstElementChild;
const content = summary.nextElementSibling;
let isAnimating = false;

summary.onclick = (ev) => {
  ev.preventDefault();
  if (isAnimating) return;

  const contentHeight = content.getBoundingClientRect().height;
  isAnimating = true;

  // Closing <details>
  if (details.open) {
    return content
      .animate(
        { height: [contentHeight + 'px', '0px'] },
        { duration: 300 }
      )
      .finished
      .then(() => details.open = isAnimating = false);
  }

  // Opening <details>
  details.open = true;
  content.animate(
    { height: ['0px', contentHeight + 'px'] },
    { duration: 300 }
  ).finished.then(() => isAnimating = false);
};</code>

이 JavaScript 코드는 animate() 메서드를 사용하여 콘텐츠 래퍼의 높이 전환을 제어합니다. 경우에 따라 최적의 결과를 얻으려면 콘텐츠 래퍼의 CSS에 overflow: hidden;를 추가해야 할 수도 있습니다.

설명

JavaScript 코드는 기본 <summary> 동작을 방지하고 콘텐츠 높이를 가져온 다음 animate() 메서드를 사용하여 <details>가 열리거나 닫히는지 여부에 따라 높이를 부드럽게 조정합니다. isAnimating 변수는 여러 애니메이션이 동시에 실행되는 것을 방지합니다.

`isAnimating` 변수

isAnimating 플래그는 한 번에 하나의 애니메이션만 실행되도록 보장하여 애니메이션이 진행되는 동안 사용자가 반복적으로 클릭할 경우 충돌이나 예상치 못한 동작을 방지합니다.

결론

이 기술은 <details> 요소에 부드럽고 제어된 전환을 제공합니다. 이 예제에서는 높이 애니메이션을 사용하지만 animate() 메서드를 다른 CSS 속성에 애니메이션으로 적용하여 매력적인 사용자 상호 작용을 만드는 다양한 접근 방식을 제공할 수 있습니다. 고급 애니메이션의 경우 animate() 방법과 해당 기능에 대해 자세히 알아보는 것이 좋습니다.

위 내용은

요소로 전환 전환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!