CSSトランジションは高さを変更することで要素を拡大したり縮小したりします。

CSSトランジションは高さを変更することで要素を拡大したり縮小したりします。

一般的な開発ニーズとして、要素の一部を必要になるまで折りたたんでおきたいことが挙げられます。 Bootstrap や JQuery などの一般的なフレームワークには、トランジション効果を提供するものがあります。ただし、CSS Transition を使用すると、高さの遷移に関して非常に柔軟に対応できます。したがって、プロジェクトに追加のフレームワークを含める必要はありません。
次に、CSS Transition を使用して height プロパティをアニメーション化する方法と、問題点と解決策について見ていきましょう。
効果は👉で確認できます

遷移の高さ

私たちが実現したいのは、「もっと見る」ボタンをクリックすると、要素の高さが増加して記事のすべてのコンテンツが表示され、もう一度クリックすると元のサイズに戻ることです。
このための CSS クラスを作成します。このクラスは、「詳細を表示」ボタンがクリックされたときに JavaScript を使用して <article> 要素に追加されます。
まず、HTML ファイルに <div> 要素を追加し、コンテンツを追加します。

<記事id="記事">
  <h3>CSS トランジションを使用して高さを変更することで要素を展開したり折りたたんだりする</h3>
  <p>Lorem ipsum、痛みはエリートのアディピス中毒者によってもたらされました。一時的に症状が現れ、その後、責任を問われました。完全に元に戻ったため、通常の生活に戻ることができず、法的措置が取られました。</p>

  <p> lorem ipsum dolor sit amet adipisicing elit、ab doloribus optio。エクササイズのCommodi reiciendis culpa optio aliquam incidunt、ab sapiente dignissimos、sit deleniti boluptatibus animi repudiandae 、nisi ullam boluptatum odio non eum vel vel dolorum dolorum adipisci culpa

  <p> lorem ipsum dolor sit amet adipisicing elit、ab doloribus optio。エクササイズのCommodi reiciendis culpa optio aliquam incidunt、ab sapiente dignissimos、sit deleniti boluptatibus animi repudiandae 、nisi ullam boluptatum odio non eum vel vel dolorum dolorum adipisci culpa

  <p> lorem ipsum dolor sit amet adipisicing elit、ab doloribus optio。エクササイズのCommodi reiciendis culpa optio aliquam incidunt、ab sapiente dignissimos、sit deleniti boluptatibus animi repudiandae 、nisi ullam boluptatum odio non eum vel vel dolorum dolorum adipisci culpa
</記事>
<button id="seeMoreBtn">もっと見る</button>

CSS スタイルは次のとおりです。

記事 {
  最大幅: 800px;
  高さ: 300px;
  オーバーフロー-y: 非表示;
}

/* ボタンがクリックされたときにこのクラスを追加します */
記事.extended {
  高さ: 628px;
}

ボタン {
  パディング: .6rem;
}

JavaScript は次のとおりです。

定数seeMore = document.getElementById('seeMoreBtn')
定数記事 = document.getElementById('記事')

seeMore.addEventListener('click', () => {
  article.classList.toggle('拡張')

  const 拡張 = article.classList.contains('拡張')
  if (拡張) {
    seeMore.innerHTML = 'コンテンツを折りたたむ'
  } それ以外 {
    seeMore.innerHTML = 'もっと見る'
  }
})

ボタンがクリックされたときにコンテンツがスムーズに上下にスライドできるように、記事に CSS トランジション プロパティを追加します。

記事 {
  最大幅: 800px;
  高さ: 300px;
  オーバーフロー-y: 非表示;
  遷移: 高さ 0.4 秒の線形;
}

これを記事に適用すると、スムーズに上下にスライドできることがわかります。シンプルで便利ですが、この方法には制限があります。以下で見てみましょう。

制限

この制限は、高さがわかっているかどうかです。上記の例では、記事の高さが明確にわかっており、非常にうまく機能しますが、動的なコンテンツを扱う場合、要素の高さはわかりません。また、画面サイズやその他の手段によって高さが変わることもあります。
実際、解決策は非常に簡単です。動的コンテンツの場合、要素の高さを auto に設定する必要があります。こうすることで、要素の高さの増減が適応されます。しかし、別の問題が発生します。要素の高さが自動に設定されている場合、CSS トランジションは機能しません。
幸いなことに、JavaScript をさらに使用しなくてもこの問題を解決する方法があります。

解決

解決策は、height プロパティの代わりに max-height プロパティを変換することです。まず、要素が到達できる最大の高さを見積もる必要があります。次に、要素が拡大するときに、要素の max-height を推定値よりも大きく設定します。
height プロパティを max-height に変更します。

記事 {
    最大幅: 800px;
    最大高さ: 300px;
    オーバーフロー-y: 非表示;

    /* 高さに合わせて遷移時間を増やす */
    遷移: 最大高さ 0.7 秒線形;
}

記事.展開{
    最大高さ: 1500px;
}

この方法ではアニメーションが機能し、必要な効果が得られます。必要な効果に応じて遷移時間を調整する必要がある場合があります。

CSSトランジションの高さを変更して要素を展開したり折りたたんだりする方法についての記事はこれで終わりです。CSS高さを使用した要素の展開と折りたたみの詳細については、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

<<:  指定されたIEブラウザのレンダリング方法の詳細な理解

>>:  Centos7 で NIS を構成する詳細な手順

推薦する

docker cp ファイルをコピーしてコンテナに入る

実行中のコンテナに入る # コンテナに入り、新しいターミナルを開きます# docker exec -...

jQueryはネストされたタブ機能を実装します

この記事では、ネストされたタブ機能を実装するためのjQueryの具体的なコードを参考までに紹介します...

Vue で動的パラメータと計算プロパティを使用する方法

1. 動的パラメータ2.6.0 以降では、角括弧で囲まれた JavaScript 式をディレクティブ...

フロントエンドにアニメーション遷移効果を実装する方法

目次導入従来のトランジションアニメーションCSS トランジションアニメーションjsアニメーション従来...

Docker は固定コンテナ IP アドレスを実現するためにカスタム ネットワークを作成します。

デフォルトのブリッジ ネットワークのため、コンテナーを再起動すると IP アドレスが変更されます。シ...

Keras を使って SQL インジェクション攻撃を判断する (例の説明)

この記事では、ディープラーニングフレームワーク keras を使用して、SQL インジェクションの特...

Zabbixで電子メールアラートを実装する方法

オンラインチュートリアルに従って実装しました。 zabbix3.4、スクリプトとsendEmailを...

特定のシンボルで複数の行と列に分割するMySQLの例

一部の障害コード テーブルでは、履歴またはパフォーマンス上の理由から、次の設計パターンが使用されます...

HTML入力ボックスの最適化により、ユーザーエクスペリエンスと使いやすさが向上します。

ユーザーエクスペリエンスと使いやすさを向上させるために、入力ボックスなど、Web ページでユーザーが...

ラベルタグの使用時に発生する問題の分析と解決策

最近何かをするときにラベル タグを使用しました。以前はラベル タグをほとんど使用していなかったため、...

CSS3はブラウザのスクロールバーのスタイルを変更します

注意: この方法は、Webkit ベースのブラウザにのみ適用されます。ブラウザのスクロールバーが広す...

Dockerfile echoは、指定されたファイル内の複数行のテキストを実装する方法を指定します。

Dockerfile内の指定されたファイルに複数の行を追加します。echoの後の「$」記号に注意し...

MySQLでのカスタムパラメータの使用に関する詳細な説明

MySQL 変数には、システム変数とシステム変数が含まれます。今回の学習課題はユーザー定義変数です。...

React Nativeがシミュレータにリンクできない件について

React Native は、現在人気のオープンソース JavaScript ライブラリ React...

vue+elementui+vuex+sessionStorage を使用して履歴タグ メニューを実装するためのサンプル コード

一般的には、左側にメニューがあった後、ページの上部に履歴タブ メニューを追加する必要があります。他の...