"przemiana”Jest właściwością CSS, która określa najłatwiejszą metodę kontrolowania prędkości animacji, gdy wartość CSS zmienia się z jednej wartości na drugą. Przejście można wdrożyć w CSS ”wyświetlacz" nieruchomość. Właściwość wyświetlacza jest wykorzystywana do kontrolowania układu elementu, w tym układu przepływu, siatki, flexu i wielu innych.

W tym poście zbada, jak zastosować przejścia za pomocą właściwości wyświetlania CSS.

Jak zastosować przejścia na właściwości CSS „Wyświetl”?

Użytkownicy nie mogą stosować przejść bezpośrednio w CSS ”wyświetlacz" nieruchomość. Istnieje jednak alternatywny sposób zastosowania przejść na właściwości wyświetlacza. W tym celu przejdź przez poniżej wspomnianą procedurę.

Krok 1: Zrób pojemnik „”

Najpierw utwórz kontener DIV za pomocą „”Tag wraz z przypisaną klasą o określonej wartości.

Krok 2: Dodaj nagłówek

Następnie wstaw nagłówek, wykorzystując dowolny „

" Do "

”Tagi. Na przykład, "

”Dodaje nagłówek.

Krok 3: Dodaj dane do listy

Aby wstawić dane w formie listy, użyj „

”Tag:

Lista zwierząt domowych

Kura

Kaczka

Pies

Kot

Królik

Wyjście wyżej wymienionego kodu jest następujące:

Teraz przejdź do sekcji CSS w celu stylizacji listy.

Krok 4: Styl „.element zwierząt domowych ”

Uzyskać dostęp do "”Element za pomocą przypisanej klasy„.zwierzak domowy”I zastosuj wymienione właściwości:

.zwierzak domowy
granica: 2px kropkowane RGB (230, 15, 15);
Margines: 50px;
kolor tła: RGB (252, 239, 169);

Tutaj:

• "granica„Właściwość służy do określenia granicy wokół elementu.
• "margines”Definiuje przestrzeń wokół granicy elementu.
• "kolor tła„Przydziela kolor z tyłu elementu.

Wynikowy obraz pokazuje dane wyjściowe powyższego kodu:

Krok 5: Styl dodany lista „Li”

Teraz uzyskaj dostęp do listy „div„Pojemnik z klasą”zwierzak domowy" za pomocą ".Pet-Animal> Li”I zastosuj poniżej wspomniane właściwości:

.PET-ANIMAL> Li
Widoczność: ukryta;
Krycie: 0.2;
przejście: widoczność 0, krycia 0.5s liniowy;

Tutaj:

• „„widoczność„CSS jest wykorzystywany do ustawienia widoczności elementu bez zmiany układu dokumentu, takiego jak ukryty lub widoczny.
• "nieprzezroczystość”Określa przezroczystość elementu.
• "przemiana”Pozwala użytkownikom płynnie zmieniać wartości właściwości w ciągu danego czasu:

Krok 6: Zastosuj pseudo klasę „Podnoszenie”

Teraz zastosuj „unosić się„Własność na liście:

.Pet-Animal: Hover> Li
Widoczność: widoczna;
Krycie: 1;

„„:unosić się„CSS to pseudoklasa, która wprowadza zmiany w czasie wykonywania, gdy wskaźnik myszy jest przesuwany nad elementem. Udaj listę widoczną za pomocą „widoczność”I ustaw przezroczystość za pomocą„nieprzezroczystość„Właściwości CSS do listy na podnośniku:

Można zauważyć, że pomyślnie zastosowaliśmy przejście na „wyświetlacz" nieruchomość.

Wniosek

Przejścia CSS nie może być bezpośrednio stosowane do „wyświetlacz" nieruchomość. Można go jednak zastosować w alternatywny sposób. Aby to zrobić, dodaj znacznik listy w dokumencie HTML, uzyskaj dostęp do listy według nazwy znacznika i zastosuj „Zastosuj„przemiana”,„nieprzezroczystość", I "widoczność„Właściwości CSS na liście. Następnie użyj „: unosić się„Pseudoklasa i ustaw wartość widoczności jako„widoczny". Ten post wyjaśnił, w jaki sposób przejście jest stosowane do właściwości wyświetlania CSS.