一般的な開発ニーズとして、要素の一部を必要になるまで折りたたんでおきたいことが挙げられます。 Bootstrap や JQuery などの一般的なフレームワークには、トランジション効果を提供するものがあります。ただし、CSS Transition を使用すると、高さの遷移に関して非常に柔軟に対応できます。したがって、プロジェクトに追加のフレームワークを含める必要はありません。 遷移の高さ私たちが実現したいのは、「もっと見る」ボタンをクリックすると、要素の高さが増加して記事のすべてのコンテンツが表示され、もう一度クリックすると元のサイズに戻ることです。 <記事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 秒の線形; } これを記事に適用すると、スムーズに上下にスライドできることがわかります。シンプルで便利ですが、この方法には制限があります。以下で見てみましょう。 制限この制限は、高さがわかっているかどうかです。上記の例では、記事の高さが明確にわかっており、非常にうまく機能しますが、動的なコンテンツを扱う場合、要素の高さはわかりません。また、画面サイズやその他の手段によって高さが変わることもあります。 解決解決策は、height プロパティの代わりに max-height プロパティを変換することです。まず、要素が到達できる最大の高さを見積もる必要があります。次に、要素が拡大するときに、要素の max-height を推定値よりも大きく設定します。 記事 { 最大幅: 800px; 最大高さ: 300px; オーバーフロー-y: 非表示; /* 高さに合わせて遷移時間を増やす */ 遷移: 最大高さ 0.7 秒線形; } 記事.展開{ 最大高さ: 1500px; } この方法ではアニメーションが機能し、必要な効果が得られます。必要な効果に応じて遷移時間を調整する必要がある場合があります。 CSSトランジションの高さを変更して要素を展開したり折りたたんだりする方法についての記事はこれで終わりです。CSS高さを使用した要素の展開と折りたたみの詳細については、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 |
<<: 指定されたIEブラウザのレンダリング方法の詳細な理解
実行中のコンテナに入る # コンテナに入り、新しいターミナルを開きます# docker exec -...
この記事では、ネストされたタブ機能を実装するためのjQueryの具体的なコードを参考までに紹介します...
1. 動的パラメータ2.6.0 以降では、角括弧で囲まれた JavaScript 式をディレクティブ...
目次導入従来のトランジションアニメーションCSS トランジションアニメーションjsアニメーション従来...
デフォルトのブリッジ ネットワークのため、コンテナーを再起動すると IP アドレスが変更されます。シ...
この記事では、ディープラーニングフレームワーク keras を使用して、SQL インジェクションの特...
オンラインチュートリアルに従って実装しました。 zabbix3.4、スクリプトとsendEmailを...
一部の障害コード テーブルでは、履歴またはパフォーマンス上の理由から、次の設計パターンが使用されます...
ユーザーエクスペリエンスと使いやすさを向上させるために、入力ボックスなど、Web ページでユーザーが...
最近何かをするときにラベル タグを使用しました。以前はラベル タグをほとんど使用していなかったため、...
注意: この方法は、Webkit ベースのブラウザにのみ適用されます。ブラウザのスクロールバーが広す...
Dockerfile内の指定されたファイルに複数の行を追加します。echoの後の「$」記号に注意し...
MySQL 変数には、システム変数とシステム変数が含まれます。今回の学習課題はユーザー定義変数です。...
React Native は、現在人気のオープンソース JavaScript ライブラリ React...
一般的には、左側にメニューがあった後、ページの上部に履歴タブ メニューを追加する必要があります。他の...