I denne manual lærer vi proceduren for at vise og skjule div'en med ' overgang ” ejendom af CSS.
Hvordan viser og skjuler man en Div med overgang i CSS?
CSS ' overgang ” ejendom gør det nemt at ændre ejendommens værdi baseret på en bestemt periode. Det kan være et flydende eller aktivt element, afhængigt af dets tilstand. Desuden bruges overgangsegenskaben for CSS til at vise og skjule div'en i HTML.
Lad os nu gå videre til syntaksen for overgangsegenskaben.
Syntaks
Der er to ting, du skal angive, når du opretter en overgangseffekt:
I bund og grund, ' overgang ” er en stenografi ejendom bestående af fire andre ejendomme, som er angivet nedenfor:
overgang : overgang-ejendom overgang-varighedovergang-timing-funktion overgangsforsinkelse
Her er beskrivelsen af de nævnte ejendomme:
- overgangs-ejendom: Det bruges til at indstille overgangen til enhver CSS-egenskab. Såsom bredde, højde, opacitet og mange flere.
- overgangsvarighed: Det bruges til at angive varigheden af overgangen.
- overgangs-timing-funktion: Det bruges til at indstille overgangshastigheden.
- overgangsforsinkelse: Det angiver tidspunktet for, hvornår overgangen starter eller forsinkes.
Lad os tage et eksempel, hvor vi vil vise og skjule div'en med ' overgang ” ejendom af CSS. Til dette formål opretter vi først en ' div ' og en inputtype ' afkrydsningsfeltet ”.
Trin 1: Opret og stil Div
Indenfor
HTML
Herefter vil vi style div'en ved at bruge egenskaben baggrundsfarve og indstille farven på baggrunden som ' rgb(238, 190, 118) ”. Vi vil indstille højden af div som ' 150 px ' og juster kanten omkring det som ' 10px ', ' ryg ', og ' rgb(6, 56, 2) ”. Til sidst vil vi angive skriftstørrelsen som ' 50 px ”.
CSS
div {baggrundsfarve : rgb ( 238 , 190 , 118 ) ;
højde : 150 px ;
grænse : 10px ryg rgb ( 6 , 56 , to ) ;
skriftstørrelse : 50 px ;
}
Outputtet af den ovenfor beskrevne kode er givet nedenfor. Her kan du se, at div og afkrydsningsfeltet er oprettet:
Gå nu til næste trin, hvor vi skjuler og viser div'en ved hjælp af overgangsegenskaben.
Trin 2: Vis og skjul en Div med overgang
For at gøre dette indstiller vi overgangseffekten ved at indstille ' Gennemsigtighed ', dens varighed som ' 2s ', og værdien af opacitet som ' 0 ” i div-klassen vi oprettede i CSS:
overgang : Gennemsigtighed 2s ;Gennemsigtighed : 0 ;
Bemærk: Vi vil anvende overgangen på ' Gennemsigtighed ” egenskab for at indstille elementets gennemsigtighed. Her vil vi angive dens værdi som ' 0 ”, hvilket betyder, at når overgangen starter, vil div'en være skjult i to sekunder.
Efter indstilling af overgangsværdierne vil vi bruge ' input ' for at få adgang til inputtypen, der er oprettet i HTML-filen og indstille pseudoklassen for inputelementet som ' : tjekket ”. Derefter får vi adgang til den oprettede div, og ' + ” operatør vil blive brugt til at knytte afkrydsningsfeltet til div. Når en handling udføres på afkrydsningsfeltet, vil dets brug påvirke div. Dernæst vil vi indstille opacitetsværdien som ' 1 ”:
input : kontrolleret + div {Gennemsigtighed : 1
}
Bemærk: Vi vil angive opacitetsværdien som ' 1 ”, hvilket betyder, at når afkrydsningsfeltet er markeret, vil den oprettede div blive vist. Desuden skal du fjerne markeringen for at skjule div
Som du kan se, vises div'en og skjules ved hjælp af ' overgang ' ejendom og ' : tjekket ” pseudo-klasse element:
Vi har forklaret metoden til at skjule og vise en div med overgangsegenskab i CSS.
Konklusion
For at vise og skjule en div skal ' overgang ' ejendom og ' : tjekket ” pseudo-klasse element bruges på en sådan måde, at værdien af div opacitet er sat som ” 0 ', og i :checked pseudo-class element, sæt opacitet som ' 1 ”. Når brugeren klikker på afkrydsningsfeltet, vil div'en blive vist, og når den ikke er markeret, vil div'en skjule sig. I denne manual har vi beskrevet metoden til at skjule og vise div ved at bruge overgangsegenskaben.