Untersuchung der Wirkung der durch JS realisierten Seitenseitenleiste

Tatsächlich ist die Wirkung wahrscheinlich folgende:

Und der Titel spiegelt möglicherweise mein wahres Gefühl wider, als ich diesen Effekt sah. Denn die erste Reaktion ist: „Können wir die Seite auch aus der Gesamtseite raus verschieben?“

Entdecken Sie: Anwendung von Display-Animation

Was war die Ursache für das Ganze? Ich hatte vor kurzem vor, einen solchen Effekt auf der offiziellen Website eines Community-Projekts zu erstellen: Klicken Sie auf den Avatar, und von links/rechts gleitet ein „Panel“ heraus, das die persönlichen Informationen des Benutzers anzeigt.

Natürlich gibt es viele Möglichkeiten, dies zu tun, wie zum Beispiel: durch Positionspositionierung + Überlauf-Überlauf-Verbergen, durch Opazität/Sichtbarkeit-Verbergen + Zeiger-Ereignisse-Elementdurchdringung ... Aber was mir damals einfiel, war, wie man zum „ echten Verbergen, Anzeigen “ eine Animation hinzufügen könnte!

Was wir wahrscheinlich alle wissen, ist, dass während des HTML-Rendering-Prozesses ein „Reflow“- und „Repaint“-Prozess ausgeführt werden kann, der die Leistung der Seite beeinträchtigen kann. Es gibt viele Gründe, die dazu führen, dass dieser Prozess ausgelöst wird: Elementpositionsverschiebung, Größenänderung, Hinzufügen und Löschen von Knoten und das hier erwähnte Umschalten zwischen Anzeige und Ausblenden usw. Die Änderungen der Elemente müssen schnell auf der Seite angezeigt werden, damit sie für uns „abrupt“ erscheinen.
Und man sollte beachten, dass der Browser „ein bisschen schlau“ ist. Er kann feststellen, dass, wenn es viele Codes gibt, die einen Seitenumbruch auslösen, er sie alle liest und sie dann zusammenführt . Deshalb hat der folgende Code die folgende Wirkung:

/** CSS-Code */
Breite: 50px;
Höhe: 50px;
Hintergrundfarbe: rot;
Anzeige: keine;
transformieren: übersetzenX(0);
Übergang: alle 0,6 Sekunden mühelos; //Scheint nutzlos?

//js-Code ds.style.display="block";
ds.style.transform="übersetzenX(100px)"; 

Aber auch beim Bedienen der folgenden Eigenschaften gibt es aufgrund des Rendering-Mechanismus des Browsers einige APIs, die das Rendering der Seite erzwingen können (da detaillierte und genaue Informationen erforderlich sind), darunter: offsetTop, offsetLeft, offsetWidth, offsetHeight, scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, clientHeight, getComputedStyle() (currentStyle in IE). Dies führt direkt dazu, dass die beiden Zeilen davor und danach einem „zweimaligen Rendern“ gleichkommen.

Ändern Sie daher den obigen JS-Code wie folgt:

//js-Code ds.style.display="block";
ds.OffsetHöhe;
ds.style.transform="übersetzenX(100px)";

Das ist alles

Derzeit verwendet der Bild-Upload auf der Blink-Release-Seite der PC-Version der offiziellen CSDN-Website eine ähnliche Funktion!

Später fiel mir auf, dass diese Methode zum Ändern der Seitenstruktur JS erforderte, also …

Implementierung: So erzielen Sie den Effekt der Anzeige der ersten Zeile des Artikels

Dies wird sich basierend auf der Positionspositionierung „überlappen“: Nachdem die Positionierungsattribute für zwei Inline-Elemente festgelegt wurden (aber keine Positionierung oben/links/unten/rechts hinzugefügt wurde), werden die letzteren die ersteren überdecken; zu diesem Zeitpunkt kann die Position verschoben und über den Rand angezeigt werden .

Es kann nur ein Inline-Element sein, kein Inline-Blockelement. ——Yun Xiaomeng

Der Aufbau ist etwa wie folgt:

<div Klasse="Seitenliste">
	<div Klasse="z_two_page">
		<!-- Hier sind die Informationen, die im Popup-Fenster rechts angezeigt werden-->
	</div>
	<div Klasse="Box">
		<!-- "Seite"-Maske -->
		<div Klasse="zb_mask"></div>
		<!-- Hier kommt die Datenstruktur „Seite“ hin (also alles, was unter dem Body-Tag stehen soll) -->
	</div>
	<!-- Dies ist ein Platzhalterelement-->
	<div Klasse="Leerzeichen"></div>
</div>

Tatsächlich sieht es so aus:

<div Klasse="Seitenliste">
	<div class="z_two_page">Hahaha</div>
	<div Klasse="Box">
		<div Klasse="zb_mask"></div>
		
		<div id="Boxen">
		 <div Klasse="links" Stil="Hintergrundfarbe:#ffc5c5;"></div>
		 <div Klasse="rechts" Stil="Hintergrundfarbe:#7171f7;">
			 Das zweispaltige Layout unter Flex ist links fest und rechts adaptiv </div>
		</div>
		<div Klasse="Farbe"></div>
		<a href="#" rel="external nofollow" class="a">Seien Sie vorsichtig, wenn Sie globale Stile für ein festlegen (dies wird als Stil-Reset bezeichnet)</a>
		<div Klasse="Mitte">
			<div Klasse="ds"></div>
			<button class="but">Gehe zum angegebenen Ort</button>
		</div>
		<form id="form" action="#">
			<input type="submit" value="="Fußleiste/>
		</form>
		<img id="img" src="komprimieren/komprimieren/img/mxc_16x16.png" />
	</div>
	
	<div Klasse="Leerzeichen"></div>
</div>

Wie oben gezeigt, enthält das Div mit der Klasse „Box“ die „ursprüngliche gesamte Seite“. Um den gewünschten Effekt zu erzielen, verwenden wir Flex-Layout!

Flex umfasst in abgekürzter Form drei Eigenschaften: Flex-Grow, Flex-Shrink und Flex-Basis –

• flex-grow: Gibt die Zuordnungsregel an, wenn im Container zu viel Speicherplatz vorhanden ist. Der Standardwert ist 0, und der überschüssige Speicherplatz wird nicht zugeordnet.
• flex-shrink: Gibt die Zuweisungsregel an, wenn der verbleibende Speicherplatz des Containers nicht ausreicht. Der Standardwert ist 1, was bedeutet, dass der Speicherplatz zugewiesen werden muss, wenn nicht genügend Speicherplatz vorhanden ist.
• Flex-Basis: Flex-Basis gibt einen festen Zuweisungsbetrag an, der Standardwert ist „Auto“.

Beim Einstellen müssen Sie das Breiten- oder Höhenattribut festlegen.

/* Liste scrollt nur horizontal */
.page_list { Breite: 100vw; Anzeige: flex; Überlauf-y: versteckt; }
/* Hauptinhaltsbreite 100 %, weiße Hintergrundabdeckung*/
.box { flex: 0 0 100vw; Höhe: 100 %; Hintergrundfarbe: #fff; Position: relativ; Überlauf-y: automatisch; Überlauf-x: verborgen; Übergang: alle 0,6 Sekunden; }
/**Ebenenstil maskieren*/
.zb_mask{
	Position: absolut;
	oben: 0;
	links: 0;
	Breite: 100 %;
	Höhe: 100%;
	Z-Index: 100;
	Hintergrundfarbe: rgba(0,0,0,.2);
	Zeigerereignisse: keine;
	Deckkraft: 0;
	Übergang: alles 0,6 s leicht;
}
/* Leeres Beschriftungselement, um Platz für horizontales Scrollen freizugeben*/
.Leerzeichen { flex: 0 0 12rem; }
/* Der Button ist fest positioniert und hinter dem weißen Hintergrund des Inhalts versteckt*/
.z_two_page { Breite: 12rem; Position: fest; rechts: 0; oben: 0; }

Das bedeutet: Es zeigt den Inhalt der Box an, ohne etwas zu tun (was den gleichen Effekt hat wie ohne die schicken Divs). Es verwendet background , um das Platzhalterelement mit class „space“ dahinter abzudecken. Wenn „hahahaha“ angezeigt wird, bewegt sich die Box nach rechts.

Zu beachten ist hierbei: Warum steht das Div, zu dem "Hahaha" gehört, vorne und das Div, zu dem "Seite" gehört, hinten?
Denn wie bereits gesagt, wird hier die Positionsüberlagerung verwendet und die Regel lautet „die Rückseite bedeckt die Vorderseite“. Bei Verwendung dieser Layoutmethode sollten daher die Elemente, die am Anfang verborgen sind, nach vorne gestellt werden.

Die ersten beiden Flex-Attribute im Code haben den Wert 0, was bedeutet, dass der Abstand gleich bleibt, wenn er vergrößert oder verkleinert wird (das ist die Grundlage dieses Artikels!), und das dritte Element schreibt die „Standardgröße“ bei der Anzeige: Wie Sie sehen, hostet die Box die Seite, also ist sie 100vw , während das Element mit class „z_two_page“ hier 12rem eingestellt ist. Sie können diesen Wert vollständig ändern!

Wie zeigen wir also „Hahahaha“ in unserem Sichtfeld an? —— js kann die Gesamtbewegung von „Elementen, die die Seite darstellen“ steuern.

Hier gibt es einen „Maskenebeneneffekt“. Gemäß der herkömmlichen JS-Implementierung müssen Sie eine Anzeige finden. Sie können außerdem den oben erwähnten „Anzeigeanimationseffekt“ verwenden, um das Erlebnis zu verbessern.
Allerdings wird dem CSS-Code oben in diesem Artikel pointer-events hinzugefügt: ob das Element durchdringbar ist; wenn es auf „none“ gesetzt ist, müssen Sie sich nicht darum kümmern, ob das entsprechende Element existiert (aus Ereignissicht ist es dasselbe, ob es existiert oder nicht), und Sie müssen weder die Anzeige noch ähnliches steuern, was die Leistung erheblich verbessert!

rechts lassen = document.querySelector(".right");
let box = document.querySelector(".box");
let mask = document.querySelector(".zb_mask");
rechts.beiKlick=Funktion(){
 box.style.marginLeft="-12rem";
 mask.style.cssText+="Deckkraft: 1; Zeigerereignisse: alle;"
}
mask.onclick=Funktion(){
 box.style.marginLeft="0";
 mask.style.cssText+="Deckkraft: 0; Zeigerereignisse: keine;"
}

Angesichts einiger Probleme bei der Anzeige von Seiten auf Mobilgeräten, beispielsweise des Leerraums auf der rechten Seite und der Auswirkung nativer Gesten auf die gesamte Seite, setzen wir in CSS normalerweise html{max-width: 100vw;overflow-x: hidden;} . Wenn Sie möchten, dass Benutzer nur auf Mobilgeräten auf die Popup-Seitenleiste klicken können, können wir hier Einschränkungen in CSS hinzufügen – stellen Sie die obige Funktion so ein, dass sie nur auf dem PC wirksam ist:

@media (any-hover: keine) {
	.Seitenliste{
		Überlauf-x: versteckt;
	}
}

Dies ist das Ende dieses Artikels zur Untersuchung des Seitenleisteneffekts von JS-Seiten. Weitere relevante Inhalte zur Seitenleiste von JS-Seiten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!