U ovom ćemo priručniku naučiti postupak za prikazivanje i skrivanje diva pomoću ' tranzicija ” svojstvo CSS-a.
Kako prikazati i sakriti Div s prijelazom u CSS-u?
CSS ' tranzicija ” imovine olakšava promjenu vrijednosti nekretnine na temelju određenog razdoblja. Može biti plutajući ili aktivni element, ovisno o stanju. Štoviše, svojstvo prijelaza CSS-a koristi se za prikazivanje i skrivanje diva u HTML-u.
Sada prijeđimo na sintaksu svojstva prijelaza.
Sintaksa
Postoje dvije stvari koje trebate navesti prilikom stvaranja efekta prijelaza:
Uglavnom, ' tranzicija ” je skraćeno svojstvo koje se sastoji od četiri druga svojstva, koja su navedena u nastavku:
tranzicija : prijelaz-svojstvo prijelaz-trajanjeprijelazna-vremenska-funkcija prijelazno-odgoda
Evo opisa navedenih nekretnina:
- prijelazno svojstvo: Koristi se za postavljanje prijelaza na bilo koje CSS svojstvo. Kao što su širina, visina, neprozirnost i još mnogo toga.
- prijelazno trajanje: Koristi se za određivanje trajanja prijelaza.
- funkcija-vremena-prijelaza: Koristi se za postavljanje brzine prijelaza.
- kašnjenje prijelaza: Određuje vrijeme kada prijelaz počinje ili odgađa.
Uzmimo primjer u kojem ćemo prikazati i sakriti div s ' tranzicija ” svojstvo CSS-a. U tu svrhu prvo stvaramo ' div ' i vrstu unosa ' potvrdni okvir ”.
Korak 1: Stvorite i stilizirajte Div
Unutar oznake
HTML
>
U nastavku ćemo oblikovati div pomoću svojstva background-color i postaviti boju pozadine kao ' rgb(238, 190, 118) ”. Postavit ćemo visinu diva kao ' 150 px ' i podesite obrub oko njega kao ' 10 px ”, “ greben ', i ' rgb(6, 56, 2) ”. Na kraju ćemo odrediti veličinu fonta kao ' 50 px ”.
CSS
div {boja pozadine : rgb ( 238 , 190 , 118 ) ;
visina : 150 px ;
granica : 10 px greben rgb ( 6 , 56 , dva ) ;
veličina fonta : 50 px ;
}
Izlaz gore opisanog koda dan je u nastavku. Ovdje možete vidjeti da su div i potvrdni okvir uspješno kreirani:
Sada prijeđite na sljedeći korak u kojem skrivamo i prikazujemo div koristeći svojstvo prijelaza.
Korak 2: Prikažite i sakrijte Div s prijelazom
Da bismo to učinili, postavit ćemo efekt prijelaza postavljanjem ' neprozirnost “, njegovo trajanje kao „ 2s ', a vrijednost neprozirnosti kao ' 0 ” u klasi div koju smo stvorili u CSS-u:
tranzicija : neprozirnost 2s ;neprozirnost : 0 ;
Bilješka: Prijelaz ćemo primijeniti na ' neprozirnost ” svojstvo za postavljanje prozirnosti elementa. Ovdje ćemo navesti njegovu vrijednost kao ' 0 “, što znači da će div biti skriven na dvije sekunde kada prijelaz započne.
Nakon postavljanja prijelaznih vrijednosti, koristit ćemo ' ulazni ” za pristup vrsti unosa stvorenoj u HTML datoteci i postavljanje pseudo-klase elementa unosa kao “ :provjereno ”. Zatim ćemo pristupiti stvorenom divu i ' + ” operator će se koristiti za povezivanje potvrdnog okvira s div. Dakle, kada se operacija izvrši na potvrdnom okviru, njegova će upotreba utjecati na div. Zatim ćemo postaviti vrijednost neprozirnosti kao ' 1 ”:
ulazni : provjereno + div {neprozirnost : 1
}
Bilješka: Navest ćemo vrijednost neprozirnosti kao ' 1 “, što znači da kada je potvrdni okvir označen, kreirani div će biti prikazan. Štoviše, uklonite oznaku da biste sakrili div
Kao što vidite, div se prikazuje i skriva pomoću ' tranzicija ' vlasništvo i ' :provjereno ” element pseudoklase:
Objasnili smo metodu skrivanja i prikazivanja diva sa svojstvom prijelaza u CSS-u.
Zaključak
Da biste prikazali i sakrili div, ' tranzicija ' vlasništvo i ' :provjereno ” element pseudo-klase koristi se na takav način da je vrijednost neprozirnosti diva postavljena kao „ 0 ', a u elementu :checked pseudo-class postavite neprozirnost kao ' 1 ”. Kada korisnik klikne na potvrdni okvir, div će se prikazati, a kada postane neoznačen, div će se sakriti. U ovom smo priručniku opisali metodu skrivanja i prikazivanja diva korištenjem svojstva prijelaza.