Šajā rokasgrāmatā mēs apgūsim procedūru, kā parādīt un paslēpt div ar ' pāreja CSS īpašums.
Kā parādīt un paslēpt dalījumu ar pāreju CSS?
CSS ' pāreja ” īpašums ļauj viegli mainīt īpašuma vērtību, pamatojoties uz noteiktu periodu. Tas var būt peldošs vai aktīvs elements atkarībā no tā stāvokļa. Turklāt CSS pārejas rekvizīts tiek izmantots, lai parādītu un paslēptu div HTML.
Tagad pāriesim pie pārejas rekvizīta sintaksi.
Sintakse
Veidojot pārejas efektu, ir jānorāda divas lietas:
Būtībā ' pāreja ” ir saīsināts rekvizīts, kas sastāv no četriem citiem rekvizītiem, kas norādīti tālāk:
pāreja : pāreja-īpašība pāreja-ilgumspārejas laika funkcija pārejas aizkave
Šeit ir minēto īpašumu apraksts:
- pārejas īpašums: To izmanto, lai iestatītu pāreju uz jebkuru CSS īpašumu. Piemēram, platums, augstums, necaurredzamība un daudz kas cits.
- pārejas ilgums: To izmanto, lai norādītu pārejas ilgumu.
- pārejas laika funkcija: To izmanto, lai iestatītu pārejas ātrumu.
- pārejas aizkave: Tas norāda laiku, kad pāreja sākas vai aizkavējas.
Ņemsim piemēru, kurā parādīsim un paslēpsim div ar ' pāreja CSS īpašums. Šim nolūkam, pirmkārt, mēs izveidojam ' div ' un ievades veids ' izvēles rūtiņa ”.
1. darbība: izveidojiet un ieveidojiet iedalījumu
Tagā
HTML
>
Tālāk mēs veidosim div stilu, izmantojot rekvizītu background-color, un iestatīsim fona krāsu kā “ rgb(238, 190, 118) ”. Mēs iestatīsim div augstumu kā ' 150 pikseļi un pielāgojiet apmali ap to kā ' 10 pikseļi ”, “ grēda ', un ' rgb(6, 56, 2) ”. Beigās mēs norādīsim fonta lielumu kā ' 50 pikseļi ”.
CSS
div {fona krāsa : rgb ( 238 , 190 , 118 ) ;
augstums : 150 pikseļi ;
robeža : 10 pikseļi grēda rgb ( 6 , 56 , divi ) ;
fonta izmērs : 50 pikseļi ;
}
Iepriekš aprakstītā koda izvade ir norādīta zemāk. Šeit jūs varat redzēt, ka div un izvēles rūtiņa ir veiksmīgi izveidota:
Tagad pārejiet uz nākamo darbību, kurā mēs paslēpjam un parādām div, izmantojot pārejas rekvizītu.
2. darbība. Parādiet un paslēpiet dalījumu ar pāreju
Lai to izdarītu, mēs iestatīsim pārejas efektu, iestatot “ necaurredzamība ”, tā ilgums kā “ 2s ”, un necaurredzamības vērtība kā “ 0 ” div klasē, ko izveidojām CSS:
pāreja : necaurredzamība 2s ;necaurredzamība : 0 ;
Piezīme: Mēs piemērosim pāreju uz “ necaurredzamība ” rekvizītu, lai iestatītu elementa caurspīdīgumu. Šeit mēs norādīsim tā vērtību kā ' 0 ”, kas nozīmē, ka, sākoties pārejai, divzīme tiks paslēpta divas sekundes.
Pēc pārejas vērtību iestatīšanas mēs izmantosim ' ievade ”, lai piekļūtu HTML failā izveidotajam ievades veidam un iestatītu ievades elementa pseidoklasi kā “ :pārbaudīts ”. Pēc tam mēs piekļūsim izveidotajam div un “ + ” operators tiks izmantots, lai saistītu izvēles rūtiņu ar div. Tādējādi, kad tiek veikta darbība ar izvēles rūtiņu, tās lietojums ietekmēs div. Tālāk mēs iestatīsim necaurredzamības vērtību kā ' 1 ”:
ievade : pārbaudīts + div {necaurredzamība : 1
}
Piezīme: Mēs norādīsim necaurredzamības vērtību kā ' 1 ”, kas nozīmē, ka, atzīmējot izvēles rūtiņu, tiks parādīts izveidotais div. Turklāt noņemiet atzīmi, lai paslēptu div
Kā redzat, div tiek parādīts un paslēpts, izmantojot ' pāreja 'īpašums un ' :pārbaudīts ” pseidoklases elements:
Mēs esam izskaidrojuši metodi, kā paslēpt un parādīt div ar pārejas rekvizītu CSS.
Secinājums
Lai parādītu un paslēptu div, “ pāreja 'īpašums un ' :pārbaudīts ” pseidoklases elements tiek izmantots tā, ka div necaurredzamības vērtība ir iestatīta kā “ 0 ”, un elementā :checked pseidoklases iestatiet necaurredzamību kā “ 1 ”. Kad lietotājs noklikšķina uz izvēles rūtiņas, tiks parādīts div, un, kad tas tiks noņemts, div tiks paslēpts. Šajā rokasgrāmatā mēs esam aprakstījuši metodi div paslēpšanai un parādīšanai, izmantojot pārejas rekvizītu.