Hvordan vise og skjule en div med overgang i CSS

Hovedformålet med DIVS er å dele en side i forskjellige seksjoner og style dem deretter. Til sammenligning er styling av en div relativt enkel på grunn av IDS og attributter. Dessuten er det å vise og skjule divene også en del av styling.

I denne håndboken lærer vi prosedyren 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 staten. 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 trenger å spesifisere når du oppretter en overgangseffekt:

• Legg en effekt til en CSS -eiendom.
• Angi varigheten av effekten.

I utgangspunktet, "overgang”Er en kortfattet eiendom som består av fire andre egenskaper, som er gitt nedenfor:

Overgang: Overgangs-egenskap
Overgangstiming-funksjon Transition-forsinkelse

Her er beskrivelsen av de nevnte egenskapene:

• Overgangseiendom: Den brukes til å sette overgangen til enhver CSS -eiendom. Slik som bredde, høyde, opacitet og mange flere.
• Overgangs-varighet: Det brukes til å spesifisere varigheten av overgangen.
• Overgangstiming-funksjon: Det brukes til å sette hastigheten på overgangen.
• Overgang-forsinkelse: Den spesifiserer tiden når overgangen starter eller forsinkelser.

La oss ta et eksempel der vi vil vise og skjule div med "overgang”Eiendom til CSS. For dette formålet lager vi først en "div”Og en inngangstype”avkrysningsrute”.

Trinn 1: Opprett og stil Div

Innen taggen vil vi legge til en etikett ved hjelp av taggen og legge til en inngangstype som "avkrysningsrute”. Etter det, lag en div og lukk taggen.

Html

Vis div
Skjult div

Heretter vil vi style DIV ved å bruke bakgrunnsfargede egenskaper og sette fargen på bakgrunnen som “RGB (238, 190, 118)”. Vi vil sette høyden på diven som “150px”Og juster grensen rundt den som“10px”,“ridge”, Og“RGB (6, 56, 2)”. Til slutt vil vi spesifisere fontstørrelsen som "50px”.

CSS

div
bakgrunnsfarge: RGB (238, 190, 118);
Høyde: 150px;
Grense: 10px Ridge RGB (6, 56, 2);
Font-størrelse: 50px;

Utgangen fra ovennevnte kode er gitt nedenfor. Her kan du se at DIV og avkrysningsruten er opprettet med hell:

Gå nå til neste trinn der vi gjemmer oss og viser Div ved å bruke overgangsegenskapen.

Trinn 2: Vis og skjul en div med overgang

For å gjøre dette, vil vi sette overgangseffekten ved å sette "Opacitet”, Dens varighet som“2s”, Og verdien av opacitet som“0”I Div -klassen opprettet vi i CSS:

Overgang: Opacity 2s;
Opacitet: 0;

Merk: Vi vil bruke overgangen på “Opacitet”Eiendom for å sette elementets gjennomsiktighet. Her vil vi spesifisere verdien som "0”, Som betyr at når overgangen starter, vil diven være skjult i to sekunder.

Etter å ha satt overgangsverdiene, vil vi bruke “inngang”For å få tilgang til inngangstypen som er opprettet i HTML-filen og angi pseudoklassen til inngangselementet som“:krysset av”. Deretter får vi tilgang til den opprettede diven, og "+”Operatør vil bli brukt til å knytte avkrysningsruten til DIV. Dermed, når en operasjon utføres i avkrysningsruten, vil bruken påvirke DIV. Deretter vil vi sette opacitetsverdien som "1”:

Inngang: Sjekket + div
Opacitet: 1

Merk: Vi vil spesifisere opacitetsverdien som "1”, Noe som betyr at når avkrysningsruten er merket, vil den opprettede div vises. Dessuten, fjerne det for å skjule diven

Som du kan se, blir diven vist og skjult ved hjelp av “overgang”Eiendom og“:krysset av”Pseudoklasseelement:

Vi har forklart metoden for å skjule og vise en div med overgangseiendommer i CSS.

Konklusjon

Å vise og skjule en div, "overgang”Eiendom og“:krysset av”Pseudoklasse element brukes på en slik måte at verdien av div opacitet er satt som“0”, Og i: Sjekket pseudoklasseelement, sett opacitet som“1”. Når brukeren klikker på avkrysningsruten, vil div vises, og når den blir ikke merket, vil div skjule. I denne håndboken har vi beskrevet metoden for å skjule og vise Div ved å bruke overgangsegenskapen.