V této příručce se naučíme postup, jak zobrazit a skrýt div pomocí „ přechod ” vlastnost CSS.
Jak zobrazit a skrýt div s přechodem v CSS?
CSS' přechod ” usnadňuje změnu hodnoty nemovitosti na základě konkrétního období. Může to být plovoucí nebo aktivní prvek, v závislosti na jeho stavu. Vlastnost přechodu CSS se navíc používá k zobrazení a skrytí div v HTML.
Nyní přejdeme k syntaxi vlastnosti přechodu.
Syntax
Při vytváření přechodového efektu musíte určit dvě věci:
V podstatě,“ přechod “ je zkrácená vlastnost sestávající ze čtyř dalších vlastností, které jsou uvedeny níže:
přechod : přechod-vlastnost přechod-trvánípřechod-časovací funkce přechod-zpoždění
Zde je popis zmíněných vlastností:
- přechodová vlastnost: Používá se k nastavení přechodu na jakoukoli vlastnost CSS. Například šířka, výška, neprůhlednost a mnoho dalších.
- doba přechodu: Slouží k určení doby trvání přechodu.
- funkce časování přechodu: Slouží k nastavení rychlosti přechodu.
- zpoždění přechodu: Určuje čas, kdy přechod začne nebo se zdrží.
Vezměme si příklad, ve kterém ukážeme a skryjeme div pomocí „ přechod ” vlastnost CSS. Za tímto účelem nejprve vytvoříme „ div “ a typ vstupu „ zaškrtávací políčko “.
Krok 1: Vytvoření a stylování Div
V rámci tagu
HTML
<štítek > Zobrazit Div >
>
Dále upravíme styl div pomocí vlastnosti background-color a nastavíme barvu pozadí jako „ rgb(238, 190, 118) “. Nastavíme výšku div jako „ 150 pixelů “ a upravte ohraničení jako „ 10px “, “ hřbet ', a ' rgb(6, 56, 2) “. Nakonec určíme velikost písma jako „ 50 pixelů “.
CSS
div {barva pozadí : rgb ( 238 , 190 , 118 ) ;
výška : 150 pixelů ;
okraj : 10px hřbet rgb ( 6 , 56 , dva ) ;
velikost písma : 50 pixelů ;
}
Výstup výše popsaného kódu je uveden níže. Zde můžete vidět, že div a zaškrtávací políčko byly úspěšně vytvořeny:
Nyní přejděte k dalšímu kroku, ve kterém skryjeme a ukážeme div pomocí vlastnosti transition.
Krok 2: Zobrazení a skrytí prvku Div s přechodem
K tomu nastavíme přechodový efekt nastavením „ neprůhlednost “, jeho trvání jako „ 2s “ a hodnotu neprůhlednosti jako „ 0 ” ve třídě div, kterou jsme vytvořili v CSS:
přechod : neprůhlednost 2s ;neprůhlednost : 0 ;
Poznámka: Přechod použijeme na „ neprůhlednost ” pro nastavení průhlednosti prvku. Zde uvedeme jeho hodnotu jako „ 0 “, což znamená, že když přechod začne, div se na dvě sekundy skryje.
Po nastavení přechodových hodnot použijeme „ vstup “ pro přístup k typu vstupu vytvořenému v souboru HTML a nastavení pseudotřídy vstupního prvku jako „ :kontrolovány “. Poté přistoupíme k vytvořenému divu a „ + Operátor ” bude použit k přiřazení zaškrtávacího políčka k div. Když je tedy se zaškrtávacím políčkem provedena operace, její použití ovlivní div. Dále nastavíme hodnotu krytí jako „ 1 “:
vstup : kontrolovány + div {neprůhlednost : 1
}
Poznámka: Hodnotu opacity zadáme jako „ 1 “, což znamená, že když je zaškrtávací políčko označeno, zobrazí se vytvořený div. Navíc zrušte jeho označení, chcete-li skrýt div
Jak vidíte, div se zobrazí a skryje pomocí „ přechod 'majetek a' :kontrolovány ” prvek pseudotřídy:
Vysvětlili jsme metodu skrytí a zobrazení div s vlastností přechodu v CSS.
Závěr
Chcete-li zobrazit a skrýt div, „ přechod 'majetek a' :kontrolovány ” prvek pseudotřídy se používá takovým způsobem, že hodnota div opacity je nastavena jako “ 0 “ a v prvku pseudotřídy :checked nastavte neprůhlednost jako „ 1 “. Když uživatel klikne na zaškrtávací políčko, div se zobrazí, a když nebude zaškrtnuté, div se skryje. V této příručce jsme popsali způsob, jak skrýt a zobrazit div pomocí vlastnosti přechodu.