Cum să afișați și să ascundeți un Div cu tranziție în CSS

În acest manual, vom învăța procedura de a afișa și ascunde div-ul cu „ tranziție ” proprietatea CSS.

Cum să afișați și să ascundeți un Div cu tranziție în CSS?

CSS „ tranziție ” Proprietatea facilitează modificarea valorii proprietății în funcție de o anumită perioadă. Poate fi un element plutitor sau activ, în funcție de starea sa. Mai mult, proprietatea de tranziție a CSS este folosită pentru a afișa și a ascunde div-ul în HTML.

Acum, să trecem la sintaxa proprietății de tranziție.

Sintaxă

Există două lucruri pe care trebuie să le specificați atunci când creați un efect de tranziție:

• Adăugați un efect la o proprietate CSS.
• Setați durata efectului.

Pe scurt, ' tranziție ” este o proprietate stenografică formată din alte patru proprietăți, care sunt prezentate mai jos:

Iată descrierea proprietăților menționate:

• proprietate de tranziție: Este folosit pentru a seta tranziția la orice proprietate CSS. Cum ar fi lățimea, înălțimea, opacitatea și multe altele.
• durata tranziției: Este folosit pentru a specifica durata tranziției.
• funcția de sincronizare a tranziției: Este utilizat pentru a seta viteza tranziției.
• întârziere de tranziție: Specifică ora la care începe sau întârzie tranziția.

Să luăm un exemplu în care vom afișa și ascunde div-ul cu „ tranziție ” proprietatea CSS. În acest scop, în primul rând, creăm un „ div ” și un tip de intrare ” Caseta de bifat ”.

Pasul 1: Creați și stilați Div

În cadrul etichetei

HTML

În continuare, vom stila div-ul folosind proprietatea background-color și vom seta culoarea fundalului ca „ rgb(238, 190, 118) ”. Vom seta înălțimea div-ului ca „ 150px ” și ajustați chenarul din jurul lui ca „ 10px ”, “ creastă ', și ' rgb(6, 56, 2) ”. În final, vom specifica dimensiunea fontului ca „ 50px ”.

CSS

Rezultatul codului descris mai sus este prezentat mai jos. Aici, puteți vedea că div-ul și caseta de selectare sunt create cu succes:

Acum, treceți la pasul următor în care ascundem și arătăm div-ul folosind proprietatea de tranziție.

Pasul 2: Afișează și ascunde o Div cu tranziție

Pentru a face acest lucru, vom seta efectul de tranziție setând „ opacitate ”, durata sa ca „ 2s ”, iar valoarea opacității ca „ 0 ” în clasa div pe care am creat-o în CSS:

Notă: Vom aplica tranziția pe „ opacitate ” proprietate pentru a seta transparența elementului. Aici, vom specifica valoarea sa ca „ 0 ”, ceea ce înseamnă că atunci când începe tranziția, div-ul va fi ascuns timp de două secunde.

După setarea valorilor de tranziție, vom folosi „ intrare ” pentru a accesa tipul de intrare creat în fișierul HTML și pentru a seta pseudo-clasa elementului de intrare ca „ :verificat ”. Apoi, vom accesa div-ul creat și „ + ” va fi folosit pentru a asocia caseta de selectare cu div. Astfel, atunci când o operațiune este efectuată pe caseta de selectare, utilizarea acesteia va afecta div. În continuare, vom seta valoarea opacității ca „ 1 ”:

Notă: Vom specifica valoarea opacității ca „ 1 ”, ceea ce înseamnă că atunci când caseta de selectare este bifată, va fi afișat div-ul creat. Mai mult, demarcați-l pentru a ascunde div

După cum puteți vedea, div-ul este afișat și ascuns folosind „ tranziție „proprietate și „ :verificat ” element pseudo-clasă:

Am explicat metoda de a ascunde și afișa un div cu proprietate de tranziție în CSS.

Concluzie

Pentru a afișa și a ascunde un div, „ tranziție „proprietate și „ :verificat ” elementul pseudo-clasă este utilizat în așa fel încât valoarea opacității div să fie setată ca „ 0 ”, iar în elementul pseudo-clasă :verificat, setați opacitatea ca „ 1 ”. Când utilizatorul face clic pe caseta de selectare, div-ul va fi afișat, iar când devine debifat, div-ul se va ascunde. În acest manual, am descris metoda de a ascunde și afișa div folosind proprietatea de tranziție.