Detaillierte Erläuterung des Beispielcodes für die Verbesserungen und Änderungen, die CSS-Variablen bei der Entwicklung interaktiver JS-Komponenten mit sich bringen

1. Qualitative Änderungen durch CSS-Variablen

Die durch CSS-Variablen erzielten Verbesserungen gehen über die bloße Einsparung von CSS-Code und die Reduzierung der CSS-Entwicklungs- und Wartungskosten hinaus.

Noch wichtiger ist, dass viele interaktive Entwicklungen in Komponenten vom ursprünglichen JS- in den CSS-Code übertragen werden, wodurch der Komponentencode prägnanter und der visuelle Ausdruck flexibler wird.

Wir veranschaulichen diesen Wandel anhand mehrerer Fälle.

2. Vereinfachter JS-Eingriff in DOM-Einstellungen

Fall 1: Ladefortschrittseffekt

So erzielen Sie beispielsweise den in der folgenden Abbildung gezeigten variablen Effekt:

Außen gibt es eine Hintergrundebene und innen einen Fortschrittsbalken und einen Fortschrittswert.

In der Vergangenheit wurden zwei Ebenen von Div-Elementen verwendet und JS wurde verwendet, um die Breite des Farbbalkens darin zu ändern und gleichzeitig den Fortschrittswert festzulegen.

Das heißt, der Fortschrittseffekt und der Fortschrittswert des Ladens werden alle direkt von JS festgelegt und JS entspricht mehreren HTML-Informationen gleichzeitig.

Mit CSS-Variablen ist die Arbeit von JS sehr einfach. Es muss nur der Ladefortschrittswert für das Containerelement festgelegt werden. Sonst muss nichts getan werden. Was die Stilleistung oder die Anzeige des Fortschrittswerts betrifft, ist dies alles Sache von CSS.

Der entsprechende Code lautet wie folgt:

<label>Bild 1:</label>
<div Klasse = "bar" Stil = "--percent: 60;"></div>
<label>Bild 2:</label>
<div Klasse = "bar" Stil = "--percent: 40;"></div>
<label>Bild 3:</label>
<div Klasse = "bar" Stil = "--percent: 20;"></div>

.Bar {
    Höhe: 20px; Breite: 300px;
    Hintergrundfarbe: #f5f5f5;
}
.bar::vor {
    Anzeige: Block;
    Zähler-Reset: Fortschritt var(--percent);
    Inhalt: Zähler (Fortschritt) „%\2002“;
    Breite: berechnet (1 % * var (-- Prozent));
    Farbe: #fff;
    Hintergrundfarbe: #2486ff;
    Textausrichtung: rechts;
    Leerzeichen: Nowrap;
    Überlauf: versteckt;
}

Wie Sie sehen, benötigen wir nur eine Ebene von DIV-Tags, die DOM-Hierarchie ist einfach und die einzige HTML-Änderung, die vorgenommen werden muss, ist das benutzerdefinierte Attribut --percent .

Sehen heißt glauben. Klicken Sie hier: Demo für CSS-Prozentvariablen und Fortschrittsbalken

3. CSS-Variablen werden zur CSS-API

In der Vergangenheit erforderten Effekte wie Eingabeaufforderungen und Klickschalter JS, um Stile für bestimmte Elemente festzulegen. Jetzt mit CSS-Variablen benötigen wir nur ein allgemeines und sehr einfaches globales JS, und JS kann von selbst abgespielt werden, und alle anderen Effekte werden von JS gehandhabt.

Dieses JS lautet wie folgt:

/**
 * @Autor zhangxinxu(.com)
 * @description Klicken Sie irgendwo auf die Seite, um die Koordinaten zu markieren*/
document.addEventListener('mousedown', Funktion (Ereignis) {
    var Ziel = Ereignis.Ziel;
    var body = Dokument.body;
    var html = Dokument.Dokumentelement;

    // Benutzerdefinierten Eigenschaftswert festlegen body.style.setProperty('--pagex', event.pageX);
    body.style.setProperty('--pagey', event.pageY);

    html.style.setProperty('--clientx', event.clientX);
    html.style.setProperty('--clienty', event.clientY);
    html.style.setProperty('--scrolly', window.pageYOffset);

    target.style.setProperty('--offsetx', event.offsetX);
    target.style.setProperty('--offsety', event.offsetY);
    target.parentElement.style.setProperty('--target-width', target.clientWidth);
    target.parentElement.style.setProperty('--target-height', target.clientHeight);
    target.parentElement.style.setProperty('--target-left', target.offsetLeft);
    target.parentElement.style.setProperty('--target-top', target.offsetTop);
});

Es ist ersichtlich, dass der JavaScript-Code nicht mehr für die Logik im Zusammenhang mit interaktivem Verhalten verantwortlich ist, sondern direkt zu einem Tool wird, einem Tool, das lediglich die Klickkoordinatenposition sowie die Versatz- und Größeninformationen des Klickelements überträgt.

Was hat CSS bekommen?

Habe einen riesigen Schatz bekommen, einen Schatz, der jederzeit genutzt werden kann.

Ich möchte ein schickes Feedback, wenn ich auf eine Schaltfläche klicke, oder eine kreative interaktive Eingabeaufforderung, wenn ich auf eine leere Seite klicke. Das ist überhaupt kein Problem. Ich kann es verwenden, wann immer ich möchte. Es ist äußerst praktisch und kostenlos.

Man kann sagen, dass das obige JS oder ähnlicher JS-Code der Standard für die zukünftige Webentwicklung ist.

Sehen wir uns an, was der obige Code leisten kann.

Fall 2: Kreiseffekt beim Klicken auf die Schaltfläche

Wenn Sie auf die Schaltfläche klicken, wird der Kreis vergrößert. Der Mittelpunkt des vergrößerten Kreises ist die Klickposition.

Der Effekt wird im folgenden GIF gezeigt:

Der zentrale CSS-Code lautet wie folgt:

.btn:nicht([deaktiviert]):aktiv::nach {
    transformieren: übersetzen (-50 %, -50 %), skalieren (0);
    Deckkraft: .3;
    Übergang: 0 s;
}
.btn::nach {
    Inhalt: "";
    Anzeige: Block;
    Position: absolut;
    Breite: 100 %; Höhe: 100 %;
    links: var(--x, 0); oben: var(--y, 0);
    Zeigerereignisse: keine;
    Hintergrund: radialer Farbverlauf (Kreis, aktuelle Farbe 10 %, transparent 10,01 %), keine Wiederholung 50 %;
    transformieren: übersetzen (-50 %, -50 %), Skalierung (10);
    Deckkraft: 0;
    Übergang: Transformation 0,3 s, Deckkraft 0,8 s;
}

:active und die Übergangszeit auf 0 setzen. Wenn Sie also klicken und loslassen, tritt ein Übergangseffekt ein.

Sie können diese Adresse besuchen, um es zu erleben: https://xy-ui.codelabo.cn/docs/#/xy-button

Fall 3: Texteffekt erscheint beim Klicken auf die Seite

Ein weiteres Beispiel: Wenn Sie irgendwo auf dieser Seite klicken, wird die in der folgenden Abbildung dargestellte Eingabeaufforderung angezeigt.

Die Implementierung erfolgt durch das oben genannte universelle Tool JS und das folgende CSS:

body:aktiv::nach {
    transformieren: übersetzen(-50 %, -100 %);
    Deckkraft: 0,5;
    Übergang: 0 s;
    links: -999px;
}
Körper::nach {
    Inhalt: „zhangxinxu.com“;
    Position: fest;
    Z-Index: 999;
    links: calc(var(--clientx, -999) * 1px);
    oben: berechnen(var(--clienty, -999) * 1px);
    transformieren: übersetzen(-50 %, berechnen(-100 % - 20px));
    Deckkraft: 0;
    Übergang: Transformation 0,3 s, Deckkraft 0,5 s;
}

Fall 3: Der Unterstreichungseffekt zweier hin- und hergleitender Schaltflächen

In der Vergangenheit war es sehr schwierig, mit reinem CSS den Effekt zu erzielen, wenn man auf die Tabulatortaste klickt und dann die Unterstreichung herumschiebt und ihre Größe ändert, wie in der folgenden Abbildung dargestellt. Fast 99,99 % der Entwicklung beruhten auf JS, um die entsprechenden DOM-Elemente abzufragen und dann Breite, Höhe und Position festzulegen, um den interaktiven Effekt zu erzielen.

Mit dem Tool JS brauchen wir jetzt nur noch ein Stück CSS, um es zu erledigen. Sogar das Hervorheben von Text kann mit reinem CSS erfolgen. Es ist so magisch.

Der hier erzielte Effekt ist der Echtzeiteffekt (wenn kein Effekt auftritt, besuchen Sie bitte den Originalartikel von Zhang Xinxu https://www.zhangxinxu.com/wordpress/?p=9477):

Klicken Sie auf ein beliebiges Registerkartenelement, und Sie können sehen, wie die Unterstreichung mit einem Hervorhebungseffekt an die entsprechende Position gleitet.

Der entsprechende Code lautet wie folgt:

<div Klasse="yw-tab-tab"> 
  <a href="javascript:" class="yw-tab-a">QQ-Lesen</a>
  <a href="javascript:" class="yw-tab-a">Lektüre zum Einstieg</a>
  <a href="javascript:" class="yw-tab-a">Lesung mit roten Ärmeln</a>
  <a href="javascript:" class="yw-tab-a">Kostenlose Feidu-Romane</a>
</div>

.yw-tab-tab {
    Position: relativ;
    Anzeige: Flex;
    maximale Breite: 414px;
    Inhalt ausrichten: Abstand dazwischen;
    Rahmen unten: 1px durchgezogen #717678;
    Hintergrundfarbe: #fff;
    Rand: 30px automatisch;
}
.yw-tab-tab::vorher,
.yw-tab-tab::nach {
    Position: absolut;
    Breite: berechnet (var (--Zielbreite, 0) * 1px);
    links: berechnen(var(--target-left, -299) * 1px);
    Farbe: #2a80eb;
}
.yw-tab-tab[Stil]::vorher,
.yw-tab-tab[Stil]::nach {
    Inhalt: '';
}
.yw-tab-tab::vor {
    Hintergrundfarbe: aktuelle Farbe;
    Höhe: berechnet (var (--Zielhöhe) * 1px);
    Mix-Blend-Modus: Überlagerung;
}
.yw-tab-tab::nach {
    Rahmen unten: durchgezogen;    
    unten: -2px;
    Übergang: links .2s, Breite .2s;
}
.yw-tab-a {
    Farbe: #717678;
    Polsterung: 10px 0;
}

Beim Zugriff von einem mobilen Gerät aus muss mousedown Ereignis in touchstart geändert werden, ich bin jedoch zu faul, dies anzupassen.

4. Viele API-Schnittstellen von Webkomponenten können abgeschafft werden

Wenn eine Webkomponente früher eine Funktion hatte, wurde einfach eine API-Schnittstelle hinzugefügt, was sehr leistungsfähig erschien. Tatsächlich wurden jedoch mit der Zeit immer mehr APIs hinzugefügt, die Komponenten wurden schwerer und der Lernaufwand immer höher. Am Ende landete es in einer Sackgasse, wurde umständlich und fand sein Ende.

Jetzt ist es Zeit, Ihr Denken zu ändern.

Tatsächlich ist es für Funktionen, die eng mit der interaktiven Leistung zusammenhängen, nur erforderlich, benutzerdefinierte CSS-Eigenschaften an das Komponentencontainerelement zu übergeben. Es besteht keine Notwendigkeit, für bestimmte Positionierungs-, Sichtbarkeits- oder Stiländerungen verantwortlich zu sein. Alles kann CSS überlassen werden.

Da der Designausdruck hochwertig, flexibel und personalisiert ist, ist es sinnvoll und passend, ihn auf CSS-Ebene zu steuern.

Beispielsweise hat die oben erwähnte Ladekomponente, egal ob es sich um einen Balken oder einen Kreis handelt, dieselbe Verarbeitungslogik. Sie ist nur für die Übermittlung des Fortschrittswerts verantwortlich und muss sich nicht um den Stil kümmern.

Beispielsweise können ein Schiebereglerfeld (wie die Schiebereglerposition und der Eingabeaufforderungseffekt in Ant Design in der folgenden Abbildung) und ein Popup-Eingabeaufforderungsfeld alle über ein benutzerdefiniertes CSS-Attribut vervollständigt werden. JS übergibt nur Parameter und ist nicht für den UI-Stil verantwortlich.

Es ist wirklich zu spät, es ist bereits 0:56, daher werde ich die Demo nicht zeigen, sondern nur das Wesentliche verstehen.

V. Fazit

Fazit: Was soll's, ich kann nicht mal meine Augen aufmachen.

Kurz gesagt, die Idee der interaktiven Entwicklung kann umgesetzt werden. CSS-Variablen sind wirklich gut!

Vielen Dank fürs Lesen und geben Sie es gerne weiter!

Ich habe das in Eile geschrieben und die Worte benommen getippt. Wenn es Fehler gibt, weisen Sie mich bitte darauf hin.

Adresse dieses Artikels: https://www.zhangxinxu.com/wordpress/?p=9477

Damit ist dieser Artikel über die Verbesserungen und Änderungen, die CSS-Variablen für die Entwicklung interaktiver JS-Komponenten mit sich bringen, mit detailliertem Beispielcode abgeschlossen. Weitere relevante Inhalte zu CSS-Variablen und interaktiven JS-Komponenten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!