I den här manualen kommer vi att lära oss proceduren för att visa och dölja div med ' övergång ” egendom för CSS.
Hur visar och döljer man en Div med Transition i CSS?
CSS ' övergång ” fastighet gör det enkelt att ändra fastighetens värde utifrån en viss period. Det kan vara ett flytande eller aktivt element, beroende på dess tillstånd. Dessutom används övergångsegenskapen för CSS för att visa och dölja div i HTML.
Låt oss nu gå vidare till syntaxen för övergångsegenskapen.
Syntax
Det finns två saker du måste ange när du skapar en övergångseffekt:
I grund och botten, ' övergång ” är en stenografisk egenskap som består av fyra andra fastigheter, som anges nedan:
övergång : övergång-fastighet övergång-varaktighetövergång-timing-funktion övergångsfördröjning
Här är beskrivningen av de nämnda fastigheterna:
- transition-egenskap: Den används för att ställa in övergången till valfri CSS-egenskap. Såsom bredd, höjd, opacitet och många fler.
- Övergångsperiod: Den används för att ange varaktigheten av övergången.
- transition-timing-funktion: Den används för att ställa in hastigheten på övergången.
- övergångsfördröjning: Den anger tiden när övergången startar eller fördröjer.
Låt oss ta ett exempel där vi kommer att visa och dölja div med ' övergång ” egendom för CSS. För detta ändamål skapar vi först en ' div ' och en inmatningstyp ' kryssruta ”.
Steg 1: Skapa och stil Div
Inom
HTML
Härefter kommer vi att stila div:n genom att använda egenskapen bakgrundsfärg och ställa in färgen på bakgrunden som ' rgb(238, 190, 118) ”. Vi kommer att ställa in höjden på div som ' 150 pixlar ' och justera gränsen runt den som ' 10px ”, “ bergsrygg ', och ' rgb(6, 56, 2) ”. I slutändan kommer vi att ange teckensnittsstorleken som ' 50 px ”.
CSS
div {bakgrundsfärg : rgb ( 238 , 190 , 118 ) ;
höjd : 150 pixlar ;
gräns : 10px bergsrygg rgb ( 6 , 56 , två ) ;
textstorlek : 50 px ;
}
Utdata från den ovan beskrivna koden ges nedan. Här kan du se att div och kryssrutan har skapats framgångsrikt:
Gå nu till nästa steg där vi gömmer och visar div med hjälp av övergångsegenskapen.
Steg 2: Visa och dölj en div med övergång
För att göra detta kommer vi att ställa in övergångseffekten genom att ställa in ' opacitet ', dess varaktighet som ' 2s ', och värdet av opacitet som ' 0 ” i div-klassen vi skapade i CSS:
övergång : opacitet 2s ;opacitet : 0 ;
Notera: Vi kommer att tillämpa övergången på ' opacitet ”-egenskap för att ställa in elementets transparens. Här kommer vi att ange dess värde som ' 0 ”, vilket innebär att när övergången startar kommer div:en att döljas i två sekunder.
Efter att ha ställt in övergångsvärdena kommer vi att använda ' inmatning ' för att komma åt inmatningstypen som skapats i HTML-filen och ställ in pseudoklassen för inmatningselementet som ' :kontrollerade ”. Sedan kommer vi åt den skapade div, och ' + ”-operatorn kommer att användas för att associera kryssrutan med div. Således, när en operation utförs på kryssrutan, kommer dess användning att påverka div. Därefter kommer vi att ställa in opacitetsvärdet som ' 1 ”:
inmatning : kontrollerade + div {opacitet : 1
}
Notera: Vi kommer att ange opacitetsvärdet som ' 1 ”, vilket betyder att när kryssrutan är markerad kommer den skapade div att visas. Avmarkera dessutom den för att dölja div
Som du kan se visas och döljs div med hjälp av ' övergång ' egendom och ' :kontrollerade ” pseudoklasselement:
Vi har förklarat metoden för att dölja och visa en div med övergångsegenskap i CSS.
Slutsats
För att visa och dölja en div, ' övergång ' egendom och ' :kontrollerade ” pseudo-klasselement används på ett sådant sätt att värdet på div opacitet sätts som ” 0 ', och i :checked pseudo-klasselement, ställ in opacitet som ' 1 ”. När användaren klickar på kryssrutan visas div:en, och när den blir avmarkerad kommer div:en att döljas. I den här manualen har vi beskrivit metoden för att dölja och visa div med hjälp av övergångsegenskapen.