I denne håndboken lærer vi fremgangsmåten for å vise og skjule div med ' overgang ” eiendom til CSS.
Hvordan vise og skjule en Div med overgang i CSS?
CSS ' overgang ” eiendom gjør det enkelt å endre eiendommens verdi basert på en bestemt periode. Det kan være et flytende eller aktivt element, avhengig av tilstanden. Dessuten brukes overgangsegenskapen til CSS til å vise og skjule div i HTML.
La oss nå gå videre til syntaksen til overgangsegenskapen.
Syntaks
Det er to ting du må spesifisere når du oppretter en overgangseffekt:
I utgangspunktet, ' overgang ” er en stenografi-eiendom som består av fire andre eiendommer, som er gitt nedenfor:
overgang : overgang-eiendom overgang-varighetovergang-timing-funksjon overgangsforsinkelse
Her er beskrivelsen av de nevnte egenskapene:
- overgangs-eiendom: Den brukes til å sette overgangen til en hvilken som helst CSS-egenskap. Slik som bredde, høyde, opasitet og mange flere.
- overgangsvarighet: Den brukes til å spesifisere varigheten av overgangen.
- overgang-timing-funksjon: Den brukes til å angi hastigheten på overgangen.
- overgangsforsinkelse: Den spesifiserer tidspunktet når overgangen starter eller forsinkes.
La oss ta et eksempel der vi vil vise og skjule div med ' overgang ” eiendom til CSS. For dette formål oppretter vi først en ' div ' og en inndatatype ' avmerkingsboksen '.
Trinn 1: Lag og stil Div
Innenfor
HTML
Deretter vil vi style div ved å bruke bakgrunnsfarge-egenskapen og sette fargen på bakgrunnen som ' rgb(238, 190, 118) '. Vi vil sette høyden på div som ' 150 piksler ' og juster kanten rundt som ' 10 piksler ', ' rygg ', og ' rgb(6, 56, 2) '. Til slutt vil vi spesifisere skriftstørrelsen som ' 50 piksler '.
CSS
div {bakgrunnsfarge : rgb ( 238 , 190 , 118 ) ;
høyde : 150 piksler ;
grense : 10 piksler rygg rgb ( 6 , 56 , to ) ;
skriftstørrelse : 50 piksler ;
}
Utdataene fra den ovenfor beskrevne koden er gitt nedenfor. Her kan du se at div og avmerkingsboksen er opprettet:
Gå nå til neste trinn der vi skjuler og viser div ved hjelp av overgangsegenskapen.
Trinn 2: Vis og skjul en Div med overgang
For å gjøre dette, vil vi angi overgangseffekten ved å sette ' opasitet ', varigheten som ' 2s ', og verdien av opasitet som ' 0 ” i div-klassen vi opprettet i CSS:
overgang : opasitet 2s ;opasitet : 0 ;
Merk: Vi vil bruke overgangen på ' opasitet ”-egenskapen for å angi gjennomsiktigheten til elementet. Her vil vi spesifisere verdien som ' 0 ”, som betyr at når overgangen starter, vil div være skjult i to sekunder.
Etter å ha angitt overgangsverdiene, vil vi bruke ' input ' for å få tilgang til inndatatypen som er opprettet i HTML-filen og angi pseudoklassen til inputelementet som ' :sjekket '. Deretter får vi tilgang til den opprettede div, og ' + ”-operatoren vil bli brukt til å knytte avmerkingsboksen til div. Når en operasjon utføres på avkrysningsboksen, vil bruken derfor påvirke div. Deretter vil vi sette opasitetsverdien som ' 1 ':
input : sjekket + div {opasitet : 1
}
Merk: Vi vil spesifisere opasitetsverdien som ' 1 ”, som betyr at når avkrysningsboksen er merket, vil den opprettede div vises. Fjern markeringen for å skjule div
Som du kan se, vises og skjules div ved hjelp av ' overgang ' eiendom og ' :sjekket ' pseudoklasseelement:
Vi har forklart metoden for å skjule og vise en div med overgangsegenskap i CSS.
Konklusjon
For å vise og skjule en div, ' overgang ' eiendom og ' :sjekket ” pseudo-klasseelement brukes på en slik måte at verdien av div-opasitet settes som ” 0 ', og i :checked pseudo-klasseelement, sett opasitet som ' 1 '. Når brukeren klikker på avkrysningsboksen, vil div vises, og når det ikke er merket av, vil div skjules. I denne håndboken har vi beskrevet metoden for å skjule og vise div ved å bruke overgangsegenskapen.