Wie man einen DIV mit Übergang in CSS zeigt und versteckt

Der Hauptzweck von Divs besteht darin, eine Seite in verschiedene Abschnitte zu unterteilen und sie entsprechend zu stylen. Im Vergleich dazu ist das Styling eines DIV aufgrund seiner IDs und Attribute relativ einfach. Darüber hinaus ist das Anzeigen und Verstecken der Divs auch Teil des Stylings.

In diesem Handbuch lernen wir das Verfahren, um die DIV mit dem zu zeigen und zu verbergen. “ÜbergangEigentum von CSS.

Wie man einen DIV mit Übergang in CSS zeigt und versteckt?

Das CSS “ÜbergangImmobilie erleichtert es einfach, den Wert der Eigenschaft auf der Grundlage eines bestimmten Zeitraums zu ändern. Es kann je nach Zustand ein schwimmendes oder aktives Element sein. Darüber hinaus wird die Übergangseigenschaft von CSS verwendet, um die DIV in HTML zu zeigen und zu verbergen.

Gehen wir nun zur Syntax der Übergangseigenschaft über.

Syntax

Es gibt zwei Dinge, die Sie beim Erstellen eines Übergangseffekts angeben müssen:

• Fügen Sie einer CSS -Eigenschaft einen Effekt hinzu.
• Setzen Sie die Dauer des Effekts.

Grundsätzlich, "ÜbergangIst ein Kurzeigeneignis, das aus vier weiteren Eigenschaften besteht, die unten angegeben sind:

Übergang: Übergangsübertragungsdauer
Übergangs-Timing-Funktion Transition-Delay

Hier ist die Beschreibung der genannten Eigenschaften:

• Übergangs-Property: Es wird verwendet, um den Übergang zu einer CSS -Eigenschaft festzulegen. Wie Breite, Größe, Deckkraft und vieles mehr.
• Übergangszeit: Es wird verwendet, um die Dauer des Übergangs anzugeben.
• Übergangs-Timing-Funktion: Es wird verwendet, um die Geschwindigkeit des Übergangs einzustellen.
• Übergangsdelay: Es gibt die Zeit an, in der der Übergang beginnt oder verzögert.

Nehmen wir ein Beispiel, in dem wir die Div mit dem "zeigen und verbergen werden"ÜbergangEigentum von CSS. Zu diesem Zweck erstellen wir zuerst eine “div"Und ein Eingangstyp"Kontrollkästchen”.

Schritt 1: Erstellen und Stil div

Innerhalb des Tags fügen wir eine Etikett mit dem Tag hinzu und fügen einen Eingabetyp als "hinzuKontrollkästchen”. Erstellen Sie danach einen Div und schließen Sie das Tag.

Html

Zeigen Sie die Div
Versteckte Div

Im Folgenden werden wir die DIV stylen, indem wir die Eigenschaft von Hintergrundfarben verwenden und die Farbe des Hintergrunds als "festlegen" festlegen "RGB (238, 190, 118)”. Wir werden die Höhe der Div als “einstellen150px"Und passen Sie den Rand um ihn als" an "an"10px","Grat", Und "RGB (6, 56, 2)”. Am Ende werden wir die Schriftgröße als "angeben"50px”.

CSS

div
Hintergrundfarbe: RGB (238, 190, 118);
Höhe: 150px;
Grenze: 10px Ridge RGB (6, 56, 2);
Schriftgröße: 50px;

Die Ausgabe des oben beschriebenen Codes ist unten angegeben. Hier können Sie sehen, dass das Div und das Kontrollkästchen erfolgreich erstellt werden:

Wechseln Sie nun zum nächsten Schritt, in dem wir die DIV mit der Übergangseigenschaft verstecken und zeigen.

Schritt 2: Zeigen und verstecken Sie einen DIV mit dem Übergang

Dazu werden wir den Übergangseffekt durch Einstellen festlegen “Opazität", Seine Dauer als"2s", Und der Wert der Deckkraft als"0”In der Div -Klasse haben wir in der CSS erstellt:

Übergang: Deckkraft 2s;
Deckkraft: 0;

Notiz: Wir werden den Übergang anwenden “OpazitätEigenschaft, um die Transparenz des Elements festzulegen. Hier werden wir seinen Wert als "angeben"0”, Was bedeutet, wenn der Übergang beginnt, wird die DIV für zwei Sekunden versteckt sein.

Nachdem wir die Übergangswerte festgelegt haben, werden wir verwenden “Eingang”So greifen Sie auf den in der HTML-Datei erstellten Eingangstyp zu und setzen Sie die Pseudo-Klasse des Eingabeelements als": überprüft”. Dann werden wir auf die erstellte DIV und auf die “zugreifen“+Der Bediener wird verwendet, um das Kontrollkästchen mit der Div zu verknüpfen. Wenn eine Operation im Kontrollkästchen ausgeführt wird, wirkt sich die Verwendung auf die Div aus. Als nächstes setzen wir den Depazitätswert als "1”:

Eingabe: Checked + div
Deckkraft: 1

Notiz: Wir werden den Depazitätswert als “angeben1”, Was bedeutet, dass beim markierten Kontrollkästchen das erstellte Div angezeigt wird. Darüber hinaus, um es zu markieren, um die Div zu verbergen

Wie Sie sehen können, wird die DIV angezeigt und versteckt mit dem “Übergang”Eigentum und“: überprüft”Pseudo-Klasse-Element:

Wir haben die Methode erklärt, um ein DIV mit Übergangseigenschaft in CSS zu verbergen und zu zeigen.

Abschluss

Eine Div zu zeigen und zu verbergen, die “Übergang”Eigentum und“: überprüft"Pseudo-Klasse-Element wird so verwendet, dass der Wert der Divalität als" festgelegt wird "0”Und in: Überprüftes Element der Pseudoklasse, setzen Sie die Deckkraft als“1”. Wenn der Benutzer auf das Kontrollkästchen klickt, wird das Div angezeigt, und wenn es deaktiviert wird, wird sich das DIV ausblenden. In diesem Handbuch haben wir die Methode zum Ausblenden und Anzeigen von Div unter Verwendung der Übergangseigenschaft beschrieben.