W tej instrukcji poznamy procedurę pokazywania i ukrywania div za pomocą „ przemiana ” własność CSS.
Jak pokazać i ukryć div z przejściem w CSS?
CSS” przemiana ” nieruchomość ułatwia zmianę wartości nieruchomości na podstawie określonego okresu. Może być elementem pływającym lub aktywnym, w zależności od jego stanu. Co więcej, właściwość przejścia CSS służy do pokazywania i ukrywania div w HTML.
Przejdźmy teraz do składni właściwości przejścia.
Składnia
Tworząc efekt przejścia, musisz określić dwie rzeczy:
Zasadniczo, ' przemiana ” to skrócona właściwość składająca się z czterech innych właściwości, które podano poniżej:
przemiana : nieruchomość-przemiana-czas-przemianyfunkcja-czasu-przejścia-opóźnienia-przejścia
Oto opis wymienionych właściwości:
- nieruchomość przejściowa: Służy do ustawiania przejścia do dowolnej właściwości CSS. Takie jak szerokość, wysokość, nieprzezroczystość i wiele innych.
- czas trwania przejścia: Służy do określenia czasu trwania przejścia.
- funkcja czasu przejścia: Służy do ustawiania szybkości przejścia.
- Opóźnienie przejścia: Określa czas rozpoczęcia lub opóźnienia przejścia.
Weźmy przykład, w którym pokażemy i ukryjemy div z „ przemiana ” własność CSS. W tym celu najpierw tworzymy „ div ” i typ wejścia „ pole wyboru ”.
Krok 1: Twórz i stylizuj elementy Div
W tagu
HTML
<środek >>
Następnie nadamy styl div za pomocą właściwości background-color i ustawimy kolor tła jako „ rgb(238, 190, 118) ”. Ustawimy wysokość div jako „ 150px ” i dostosuj obramowanie wokół niego jako „ 10px ”, „ grzbiet ', oraz ' rgb(6, 56, 2) ”. Na koniec określimy rozmiar czcionki jako „ 50px ”.
CSS
div {kolor tła : RGB ( 238 , 190 , 118 ) ;
wzrost : 150px ;
granica : 10px grzbiet RGB ( 6 , 56 , dwa ) ;
rozmiar czcionki : 50px ;
}
Dane wyjściowe opisanego powyżej kodu podano poniżej. Tutaj możesz zobaczyć, że div i checkbox zostały pomyślnie utworzone:
Teraz przejdź do następnego kroku, w którym ukrywamy i pokazujemy div za pomocą właściwości przejścia.
Krok 2: Pokaż i ukryj div z przejściem
W tym celu ustawimy efekt przejścia, ustawiając „ nieprzezroczystość ”, jego czas trwania jako „ 2s ”, a wartość nieprzezroczystości jako „ 0 ” w klasie div, którą stworzyliśmy w CSS:
przemiana : nieprzezroczystość 2s ;nieprzezroczystość : 0 ;
Notatka: Przejście zastosujemy w dniu „ nieprzezroczystość ”, aby ustawić przezroczystość elementu. Tutaj określimy jego wartość jako „ 0 ”, co oznacza, że po rozpoczęciu przejścia element div zostanie ukryty na dwie sekundy.
Po ustawieniu wartości przejścia użyjemy „ Wejście ”, aby uzyskać dostęp do typu wejściowego utworzonego w pliku HTML i ustawić pseudoklasę elementu input jako „ :w kratę ”. Następnie uzyskamy dostęp do utworzonego div, a „ + ” zostanie użyty do powiązania pola wyboru z div. Tak więc, gdy operacja jest wykonywana na polu wyboru, jej użycie wpłynie na div. Następnie ustawimy wartość krycia jako „ 1 ”:
Wejście : w kratę + div {nieprzezroczystość : 1
}
Notatka: Określimy wartość krycia jako „ 1 ”, co oznacza, że gdy pole wyboru jest zaznaczone, utworzony div zostanie wyświetlony. Ponadto odznacz to, aby ukryć div
Jak widać, div jest pokazywany i ukrywany za pomocą „ przemiana ” własność i “ :w kratę ” element pseudoklasy:
Wyjaśniliśmy metodę ukrywania i pokazywania div z właściwością przejścia w CSS.
Wniosek
Aby pokazać i ukryć div, „ przemiana ” własność i “ :w kratę ” element pseudoklasy jest używany w taki sposób, że wartość nieprzezroczystości div jest ustawiona jako „ 0 ”, a w elemencie pseudoklasy :checked ustaw przezroczystość jako „ 1 ”. Gdy użytkownik kliknie pole wyboru, div zostanie wyświetlony, a gdy zostanie odznaczone, div się ukryje. W tym podręczniku opisaliśmy metodę ukrywania i pokazywania div za pomocą właściwości przejścia.