どのようにして、要素に移行を切り替えました

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 フラグは、一度に 1 つのアニメーションのみが実行されることを保証し、アニメーションの進行中にユーザーが繰り返しクリックした場合の競合や予期しない動作を防ぎます。

結論

この手法は、<details> 要素のスムーズで制御された遷移を提供します。 この例では高さアニメーションを使用していますが、animate() メソッドを適用して他の CSS プロパティをアニメーション化することもでき、魅力的なユーザー インタラクションを作成するための多彩なアプローチを提供します。 より高度なアニメーションについては、animate() メソッドとその機能について詳しく調べることをお勧めします。

以上がどのようにして、要素に移行を切り替えましたの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。