V tejto príručke sa naučíme postup, ako zobraziť a skryť div pomocou „ prechod ” vlastnosť CSS.
Ako zobraziť a skryť div s prechodom v CSS?
CSS ' prechod ” vlastnosť uľahčuje zmenu hodnoty nehnuteľnosti na základe konkrétneho obdobia. Môže to byť plávajúci alebo aktívny prvok v závislosti od jeho stavu. Okrem toho sa vlastnosť prechodu CSS používa na zobrazenie a skrytie prvku div v HTML.
Teraz prejdime k syntaxi vlastnosti prechodu.
Syntax
Pri vytváraní prechodového efektu musíte špecifikovať dve veci:
V podstate, “ prechod “ je skrátená vlastnosť pozostávajúca zo štyroch ďalších vlastností, ktoré sú uvedené nižšie:
prechod : prechod-vlastnosť prechod-trvanieprechodová-časová-funkcia prechod-oneskorenie
Tu je popis spomínaných vlastností:
- prechodová vlastnosť: Používa sa na nastavenie prechodu na akúkoľvek vlastnosť CSS. Ako je šírka, výška, nepriehľadnosť a mnoho ďalších.
- trvanie prechodu: Používa sa na určenie trvania prechodu.
- funkcia časovania prechodu: Používa sa na nastavenie rýchlosti prechodu.
- oneskorenie prechodu: Určuje čas, kedy sa prechod začne alebo sa oneskorí.
Zoberme si príklad, v ktorom ukážeme a skryjeme div s „ prechod ” vlastnosť CSS. Na tento účel najprv vytvoríme „ div “ a typ vstupu „ začiarkavacie políčko “.
Krok 1: Vytvorenie a úprava štýlu Div
V rámci značky
HTML
<štítok > Zobraziť Div >
>
Ďalej upravíme štýl div pomocou vlastnosti background-color a nastavíme farbu pozadia ako „ rgb(238, 190, 118) “. Nastavíme výšku div ako „ 150 pixelov “ a upravte okraj okolo neho ako „ 10 pixelov “, “ hrebeň “ a „ rgb(6, 56, 2) “. Nakoniec určíme veľkosť písma ako „ 50 pixelov “.
CSS
div {farba pozadia : rgb ( 238 , 190 , 118 ) ;
výška : 150 pixelov ;
hranica : 10 pixelov hrebeň rgb ( 6 , 56 , dva ) ;
veľkosť písma : 50 pixelov ;
}
Výstup vyššie opísaného kódu je uvedený nižšie. Tu môžete vidieť, že div a začiarkavacie políčko boli úspešne vytvorené:
Teraz prejdite na ďalší krok, v ktorom skryjeme a zobrazíme div pomocou vlastnosti prechodu.
Krok 2: Zobrazenie a skrytie prvku Div s prechodom
Za týmto účelom nastavíme efekt prechodu nastavením „ nepriehľadnosť “, jeho trvanie ako „ 2s “ a hodnota nepriehľadnosti ako „ 0 ” v triede div, ktorú sme vytvorili v CSS:
prechod : nepriehľadnosť 2s ;nepriehľadnosť : 0 ;
Poznámka: Prechod použijeme na „ nepriehľadnosť ” vlastnosť na nastavenie priehľadnosti prvku. Tu zadáme jeho hodnotu ako „ 0 “, čo znamená, že keď sa prechod spustí, div sa na dve sekundy skryje.
Po nastavení hodnôt prechodu použijeme „ vstup “, aby ste získali prístup k typu vstupu vytvorenému v súbore HTML a nastavte pseudotriedu vstupného prvku ako „ :skontrolované “. Potom pristúpime k vytvorenému divu a „ + Operátor ” sa použije na priradenie začiarkavacieho políčka k div. Keď sa teda vykoná operácia na začiarkavacom políčku, jeho použitie ovplyvní div. Ďalej nastavíme hodnotu opacity ako „ 1 “:
vstup : skontrolované + div {nepriehľadnosť : 1
}
Poznámka: Hodnotu opacity zadáme ako „ 1 “, čo znamená, že keď je začiarkavacie políčko označené, zobrazí sa vytvorený div. Okrem toho zrušte označenie, aby ste skryli div
Ako vidíte, div sa zobrazuje a skrýva pomocou „ prechod “vlastníctvo a “ :skontrolované prvok pseudotriedy:
Vysvetlili sme metódu na skrytie a zobrazenie prvku div s vlastnosťou prechodu v CSS.
Záver
Ak chcete zobraziť a skryť div, „ prechod “vlastníctvo a “ :skontrolované ” element pseudo-class sa používa tak, že hodnota div opacity je nastavená ako “ 0 “ a v prvku :checked pseudo-class nastavte nepriehľadnosť ako „ 1 “. Keď používateľ klikne na začiarkavacie políčko, div sa zobrazí, a keď nebude začiarknuté, div sa skryje. V tejto príručke sme opísali metódu na skrytie a zobrazenie div pomocou vlastnosti prechodu.