Reines CSS, um den Listen-Pulldown-Effekt auf der Seite zu erzielen

Möglicherweise sehen Sie häufig den folgenden Effekt:

Das ist richtig, es handelt sich um die häufig verwendete Interaktionsform „Erweitern und Reduzieren“ auf der Seite. Normalerweise wird der Anzeigeattributwert so gesteuert, dass er zwischen keinem und anderen Werten wechselt. Obwohl die Funktion realisiert werden kann, ist der Effekt jedoch sehr steif, sodass eine solche Anforderung besteht: Es ist zu hoffen, dass das Element beim Erweitern und Reduzieren einen offensichtlichen Höhengleiteffekt aufweist.

Die vorherige Implementierung konnte slideUp()/slideDown() Methode von jQuery verwenden, aber auf der mobilen Seite bietet das mobile JavaScript-Framework keine Animationsmodule, da CSS3-Animationen gut unterstützt werden. Hier denkt man natürlich an die CSS3-Technologie.

Meine erste Reaktion bestand darin height+overflow:hidden; zu verwenden, wodurch nicht nur Leistungsprobleme vermieden, sondern auch Anzeigeprobleme verhindert würden. Doch im Handumdrehen ist mir aufgefallen, dass der anzuzeigende Inhalt häufig dynamisch ist, was bedeutet, dass die Inhaltshöhe nicht festgelegt ist (Sie können natürlich auch overflow-y:auto; darauf wollen wir jetzt nicht näher eingehen). Um diesen Effekt zu erzielen, muss die Höhe „nicht fester Wert automatisch“ verwendet werden!

Allerdings ist auto kein numerischer Wert, sondern ein Schlüsselwort. Unter der impliziten Regel, dass numerische Werte und Schlüsselwörter nicht berechnet werden können, kann daher kein Übergangs- oder Animationseffekt erzeugt werden, wenn wir height verwenden, um zwischen 0px und auto zu wechseln.

Dasselbe gilt für clip-path -Eigenschaft in CSS: Viele Anfänger sind es gewohnt, Animationseffekte zwischen „Keine“ und bestimmten Werten zu erstellen, was unmöglich ist.

Um den Effekt des Artikelanfangs zu erzielen, empfiehlt der Autor daher das Attribut „max-height“:

<div Klasse="Akkordeon">
	<input id="collapse1" type="radio" name="tap-input" hidden />
	<input id="collapse2" type="radio" name="tap-input" hidden />
	<input id="collapse3" type="radio" name="tap-input" hidden />
	<Artikel>
		<label for="collapse1">Liste 1</label>
		<p>Inhalt 1<br>Inhalt 2<br>Inhalt 3<br>Inhalt 4</p>
	</Artikel>
	<Artikel>
		<label for="collapse2">Liste 2</label>
		<p>Inhalt 1<br>Inhalt 2<br>Inhalt 3<br>Inhalt 4</p>
	</Artikel>
	<Artikel>
		<label for="collapse3">Liste 3</label>
		<p>Inhalt 1<br>Inhalt 2<br>Inhalt 3<br>Inhalt 4</p>
	</Artikel>
</div>

.accordion {
	Breite: 300px;
}
.accordion Artikel {
	Cursor: Zeiger;
}
Etikett {
	Anzeige: Block;
	Polsterung: 0 20px;
	Höhe: 40px;
	Hintergrundfarbe: #f66;
	Cursor: Zeiger;
	Zeilenhöhe: 40px;
	Schriftgröße: 16px;
	Farbe: #fff;
}
P {
	Überlauf: versteckt;
	Polsterung: 0 20px;
	Rand: 0;
	Rand: 1px durchgezogen #f66;
	oberer Rand: keiner;
	untere Rahmenbreite: 0;
	maximale Höhe: 0;
	Zeilenhöhe: 30px;
	Übergang: alle 0,5 Sekunden mühelos;
}
Eingabe:n-tes Kind(1):aktiviert ~ Artikel:n-ter-Typ(1) p,
Eingabe:n-tes Kind(2):aktiviert ~ Artikel:n-ter-Typ(2) p,
Eingabe:n-tes Kind(3):aktiviert ~ Artikel:n-ter-Typ(3) p {
	Breite des unteren Rahmens: 1px;
	maximale Höhe: 130px;
}

In CSS erscheint min-height/max-height nur im adaptiven Layout oder im fließenden Layout. Was den max-height -Wert nach der Erweiterung betrifft, müssen wir nur sicherstellen, dass der eingestellte Wert größer als die Inhaltshöhe ist – denn wenn Max-Height > Height ist, wird die Elementhöhe basierend auf dem Height-Attribut berechnet .

Es wird jedoch empfohlen, den Wert für die maximale Höhe nicht zu groß einzustellen. Schließlich ist die Übergangs- oder Animationszeit „die Zeit zum Abschließen der Animation“ und nicht „die Zeit zum Anzeigen des Inhalts“.

Es gibt noch eine andere Möglichkeit, den Sogeffekt darzustellen:

Seine Besonderheit besteht darin, dass, wenn die Maus über einen Teil der Komponente bewegt wird, sich der Teil ausdehnt und die angrenzenden Teile zusammendrückt und in seinen ursprünglichen Zustand zurückkehrt, wenn die Maus ihn verlässt. Wenn Sie die Maus schnell darüber bewegen, entsteht ein Akkordeoneffekt.

Um den Akkordeoneffekt mit JS zu erzielen, müssen Sie mouseenter und „ mouseleave “ überwachen. Die Effekte beider Ereignisse können durch :hover von CSS ersetzt werden. Der Schlüssel zum Erzielen des Akkordeoneffekts mit reinem CSS ist daher :hover . Der Kerncode lautet wie folgt:

li {
}
li:hover {
}

Wenn Sie beim Layout Elemente, die in einer Reihe mit gleicher/unterschiedlicher Breite angeordnet sind, vergrößern und verkleinern möchten, ist Flex die bessere Lösung!

<ul Klasse="Akkordeon">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

.accordion {
	Anzeige: Flex;
	Breite: 600px;
	Höhe: 200px;
}
li {
	biegen: 1;
	Cursor: Zeiger;
	Übergang: alle 300ms;
}
li:ntes-Kind(1) {
	Hintergrundfarbe: #f66;
}
li:ntes-Kind(2) {
	Hintergrundfarbe: #66f;
}
li:ntes-Kind(3) {
	Hintergrundfarbe: #f90;
}
li:ntes-Kind(4) {
	Hintergrundfarbe: #09f;
}
li:ntes-Kind(5) {
	Hintergrundfarbe: #9c3;
}
li:ntes-Kind(6) {
	Hintergrundfarbe: #3c9;
}
li:hover {
	Flexibilität: 2;
	Hintergrundfarbe: #ccc;
}

An dieser Stelle ist zu beachten, dass in einigen „besonderen“ Fällen, wie z. B. bei Animationsverzögerungen, benutzerdefinierte CSS-Variablen als Inline-Stile in HTML eingefügt werden können, um den Code zu vereinfachen: Beginnen wir mit einer Projektumgestaltung, um darüber zu sprechen, wie benutzerdefinierte CSS3-Variablen in einem Projekt verwendet werden.

Dies ist das Ende dieses Artikels darüber, wie Sie mit reinem CSS den Pulldown-Listeneffekt auf der Seite erzielen. Weitere relevante CSS-Seitenlisten-Pulldown-Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!