ページ内のリストプルダウン効果を実現するための純粋なCSS

次のような効果がよく見られます。

そうです、ページ上でよく使われる「展開と折りたたみ」のインタラクション形式です。通常のやり方では、display属性値を制御してnoneと他の値を切り替えるのですが、機能は実現できても効果が非常に硬いため、このような要件があります。つまり、要素が展開と折りたたみ時に明らかな高さのスライド効果を持つことができることが期待されます。

以前の実装では、jQuery のslideUp()/slideDown()メソッドを使用できましたが、モバイル側では CSS3 アニメーションが適切にサポートされているため、モバイル JavaScript フレームワークはアニメーション モジュールを提供していません。ここで、自然に CSS3 テクノロジーが思い浮かびます。

私の最初の反応はheight+overflow:hidden;を使用することです。これにより、パフォーマンスの問題を回避できるだけでなく、表示の問題も防ぐことができます。しかし、すぐに、表示する必要のあるコンテンツは多くの場合動的であり、つまりコンテンツの高さが固定されていないことに気付きました (もちろん、 overflow-y:auto;今はそれについては説明しません)。この効果を実現するには、高さに「非固定値自動」を使用する必要があります。

ただし、 auto数値ではなくキーワードです。そのため、数値とキーワードは計算できないという暗黙のルールの下で、 heightを使用して0pxとautoを切り替えると、トランジションやアニメーション効果を形成できません。

CSS のclip-pathプロパティについても同じことが言えます。多くの初心者は none と特定の値の間でアニメーション効果を作成することに慣れていますが、これは不可能です。

したがって、記事の冒頭の効果を実現するために、著者は max-height 属性を推奨します。

<div class="アコーディオン">
	<input id="collapse1" type="radio" name="tap-input" 非表示 />
	<input id="collapse2" type="radio" name="tap-input" 非表示 />
	<input id="collapse3" type="radio" name="tap-input" 非表示 />
	<記事>
		<label for="collapse1">リスト 1</label>
		<p>コンテンツ 1<br>コンテンツ 2<br>コンテンツ 3<br>コンテンツ 4</p>
	</記事>
	<記事>
		<label for="collapse2">リスト 2</label>
		<p>コンテンツ 1<br>コンテンツ 2<br>コンテンツ 3<br>コンテンツ 4</p>
	</記事>
	<記事>
		<label for="collapse3">リスト 3</label>
		<p>コンテンツ 1<br>コンテンツ 2<br>コンテンツ 3<br>コンテンツ 4</p>
	</記事>
</div>

.アコーディオン {
	幅: 300ピクセル;
}
.accordion 記事 {
	カーソル: ポインタ;
}
ラベル {
	表示: ブロック;
	パディング: 0 20px;
	高さ: 40px;
	背景色: #f66;
	カーソル: ポインタ;
	行の高さ: 40px;
	フォントサイズ: 16px;
	色: #fff;
}
ｐ {
	オーバーフロー: 非表示;
	パディング: 0 20px;
	マージン: 0;
	境界線: 1px 実線 #f66;
	上境界線: なし;
	境界線の下部の幅: 0;
	最大高さ: 0;
	行の高さ: 30px;
	遷移: すべて 0.5 秒の緩和;
}
入力:nth-child(1):チェック済み ~ 記事:nth-of-type(1) p,
入力:nth-child(2):checked ~ 記事:nth-of-type(2) p,
入力:nth-child(3):チェック済み ~ 記事:nth-of-type(3) p {
	境界線の下の幅: 1px;
	最大高さ: 130px;
}

CSS では、 min-height/max-heightアダプティブ レイアウトまたはフルイド レイアウトでのみ表示されます。拡張後のmax-height値に関しては、設定された値がコンテンツの高さよりも大きいことを確認するだけで済みます。これは、max-height > height の場合、要素の高さは height 属性に基づいて計算されるためです。

ただし、max-height の値をあまり大きく設定しないことをお勧めします。結局のところ、トランジションやアニメーションの時間は「コンテンツを表示する時間」ではなく「アニメーションを完了する時間」です。

引っ張り効果を示す別の方法があります:

マウスをコンポーネントの一部に合わせると、その部分が拡大して隣接する部分を圧迫し、マウスを離すと元の状態に戻るのが特徴です。マウスを素早く動かすと、アコーディオン効果が生成されます。

JS を使用してアコーディオン効果を実現するには、 mouseenterおよびmouseleaveマウス イベントを監視する必要があり、CSS の:hover両方の効果を置き換えることができます。したがって、純粋な CSS でアコーディオン効果を実現するための鍵は:hoverです。コア コードは次のとおりです。

li {
}
li:ホバー{
}

レイアウトに関しては、行内で同じ幅または異なる幅で一列に並んだ要素を拡大または縮小したい場合は、 flex を使用する方がよいでしょう。

<ul class="accordion">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

.アコーディオン {
	ディスプレイ: フレックス;
	幅: 600ピクセル;
	高さ: 200px;
}
li {
	フレックス: 1;
	カーソル: ポインタ;
	遷移: すべて 300 ミリ秒;
}
li:n番目の子(1) {
	背景色: #f66;
}
li:n番目の子(2) {
	背景色: #66f;
}
li:n番目の子(3) {
	背景色: #f90;
}
li:n番目の子(4) {
	背景色: #09f;
}
li:n番目の子(5) {
	背景色: #9c3;
}
li:n番目の子(6) {
	背景色: #3c9;
}
li:ホバー{
	フレックス: 2;
	背景色: #ccc;
}

ここで注目すべき点は、アニメーションの遅延などの「特別な」ケースでは、 CSS カスタム変数をインライン スタイルとして HTML に挿入してコードを簡素化できることです。プロジェクト リファクタリングから始めて、プロジェクトで CSS3 カスタム変数がどのように使用されるかについて説明します。

純粋な CSS でページ上のリスト プルダウン効果を実現する方法については、これで終わりです。より関連性の高い CSS ページ リスト プルダウン コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。