Jak pokazać i ukryć div z przejściem w CSS

Głównym celem Divs jest podzielenie strony na różne sekcje i odpowiednio ich stylizowanie. Dla porównania stylowanie div jest stosunkowo proste ze względu na jego identyfikatory i atrybuty. Co więcej, wyświetlanie i ukrywanie DIVS jest również częścią stylizacji.

W tym podręczniku nauczymy się procedury pokazania i ukrycia div za pomocą „przemiana„Własność CSS.

Jak pokazać i ukryć div z przejściem w CSS?

CSS „przemiana„Własność ułatwia zmianę wartości właściwości na podstawie określonego okresu. Może to być element pływający lub aktywny, w zależności od jego stanu. Ponadto właściwość przejściowa CSS służy do pokazania i ukrycia div w HTML.

Teraz przejdźmy do składni właściwości przejściowej.

Składnia

Przy tworzeniu efektu przejściowego należy określić dwie rzeczy:

• Dodaj efekt do właściwości CSS.
• Ustaw czas trwania efektu.

Zasadniczo, "przemiana”Jest właściwością skrótów składającą się z czterech innych nieruchomości, które podano poniżej:

Przejście: Przejście przejściowe przejście
Przejście-rentowność funkcji przejściowej opóźnienie

Oto opis wspomnianych właściwości:

• przejście-proporcja: Jest wykorzystywany do ustawienia przejścia na dowolną właściwość CSS. Takie jak szerokość, wysokość, krycie i wiele innych.
• Przejście: Służy do określenia czasu trwania przejścia.
• funkcja przejściowa: funkcja: Jest wykorzystywany do ustawiania prędkości przejścia.
• Transition-Delay: Określa czas, w którym rozpoczyna się lub opóźnia przejście.

Weźmy przykład, w którym pokażemy i ukryjemy div za pomocą „przemiana„Własność CSS. W tym celu najpierw tworzymy „div”I typ wejściowy„pole wyboru".

Krok 1: Utwórz i styl div

W tagu dodamy etykietę za pomocą znacznika i dodamy typ wejściowy jako „pole wyboru". Następnie utwórz div i zamknij tag.

Html

Pokaż div
Ukryty div

Odtąd będziemy stylizować DIV, używając właściwości koloru tła i ustawiamy kolor tła jako „RGB (238, 190, 118)". Ustawimy wysokość Div jako „150px”I dostosuj granicę wokół niej jako„10px”,„grzbiet", I "RGB (6, 56, 2)". Ostatecznie określamy rozmiar czcionki jako „50px".

CSS

div
kolor tła: RGB (238, 190, 118);
Wysokość: 150px;
granica: 10px Ridge RGB (6, 56, 2);
Rozmiar czcionki: 50px;

Wyjście wyżej opisanego kodu podano poniżej. Tutaj widać, że Div i pole wyboru zostały pomyślnie utworzone:

Teraz przejdź do następnego kroku, w którym ukrywamy się i pokazujemy Div za pomocą właściwości przejściowej.

Krok 2: Pokaż i ukryj div z przejściem

Aby to zrobić, ustawimy efekt przejścia, ustawiając „nieprzezroczystość”, Jego czas trwania jako„2s”Oraz wartość krycia jako„0”W klasie DIV, którą stworzyliśmy w CSS:

przejście: krycia 2s;
Krycie: 0;

Notatka: Zastosujemy przejście „”nieprzezroczystość„Właściwość, aby ustawić przezroczystość elementu. Tutaj określimy jego wartość jako „0”, Co oznacza, że ​​po rozpoczęciu przejścia Div będzie ukryty przez dwie sekundy.

Po ustawieniu wartości przejściowych użyjemy „wejście„Aby uzyskać dostęp do typu wejściowego utworzonego w pliku HTML i ustaw pseudo-klasę elementu wejściowego jako„:sprawdzony". Następnie uzyskamy dostęp do utworzonej div i „+„Operator zostanie użyty do powiązania pole wyboru z Div. Tak więc, gdy operacja zostanie wykonywana na polu wyboru, jego użycie wpłynie na Div. Następnie ustawimy wartość krycia jako „1”:

wejście: sprawdzone + div
Krycie: 1

Notatka: Określymy wartość krycia jako „1”, Co oznacza, że ​​po zaznaczeniu pola wyboru utworzone div zostanie wyświetlone. Co więcej, nie zaznacz go, aby ukryć div

Jak widać, div jest pokazywany i ukryty za pomocą „przemiana”Własność i„:sprawdzony„Element pseudokliczny:

Wyjaśniliśmy metodę ukrycia się i pokazania DIV z właściwością przejściową w CSS.

Wniosek

Pokazać i ukryć div, „przemiana”Własność i„:sprawdzony„Element pseudoklasy jest używany w taki sposób, że wartość sprytności jest ustalana jako„0”Oraz w: sprawdzonym pseudoklicznym elemencie, ustaw krycie jako„1". Gdy użytkownik kliknie pole wyboru, Div zostanie wyświetlony, a gdy zostanie niezaznaczony, Div się ukryje. W tym podręczniku opisaliśmy metodę ukrycia i pokazania DIV za pomocą właściwości przejściowej.