In deze handleiding zullen we de procedure leren om de div te tonen en te verbergen met de “ overgang ” eigenschap van CSS.
Hoe een div met overgang in CSS te tonen en te verbergen?
de CSS“ overgang ” eigenschap maakt het gemakkelijk om de waarde van het onroerend goed te wijzigen op basis van een specifieke periode. Het kan een drijvend of actief element zijn, afhankelijk van de staat. Bovendien wordt de overgangseigenschap van CSS gebruikt om de div in HTML te tonen en te verbergen.
Laten we nu verder gaan met de syntaxis van de overgangseigenschap.
Syntaxis
Er zijn twee dingen die u moet specificeren bij het maken van een overgangseffect:
In principe, ' overgang ” is een steno-eigenschap die bestaat uit vier andere eigenschappen, die hieronder worden gegeven:
overgang : transitie-eigenschap transitie-duurtransitie-timing-functie transitie-vertraging
Hier is de beschrijving van de genoemde eigenschappen:
- overgangseigenschap: Het wordt gebruikt om de overgang naar een CSS-eigenschap in te stellen. Zoals breedte, hoogte, dekking en nog veel meer.
- overgangsduur: Het wordt gebruikt om de duur van de overgang op te geven.
- overgang-timing-functie: Het wordt gebruikt om de snelheid van de overgang in te stellen.
- overgangsvertraging: Het specificeert het tijdstip waarop de overgang begint of vertraagt.
Laten we een voorbeeld nemen waarin we de div tonen en verbergen met de ' overgang ” eigenschap van CSS. Hiervoor maken we eerst een “ div ” en een invoertype “ selectievakje ”.
Stap 1: Creëer en stijl Div
Binnen de
HTML
>
Hierna zullen we de div opmaken met behulp van de background-color eigenschap en de kleur van de achtergrond instellen als “ RGB(238, 190, 118) ”. We zullen de hoogte van de div instellen als ' 150px ' en pas de rand eromheen aan als ' 10px ”, “ bergkam ', en ' RGB(6, 56, 2) ”. Uiteindelijk zullen we de lettergrootte specificeren als ' 50px ”.
CSS
div {Achtergrond kleur : rgb ( 238 , 190 , 118 ) ;
hoogte : 150px ;
grens : 10px bergkam rgb ( 6 , 56 , twee ) ;
lettertypegrootte : 50px ;
}
De uitvoer van de hierboven beschreven code wordt hieronder gegeven. Hier kunt u zien dat de div en het selectievakje met succes zijn gemaakt:
Ga nu naar de volgende stap waarin we de div verbergen en tonen met behulp van de overgangseigenschap.
Stap 2: Toon en verberg een div met overgang
Om dit te doen, zullen we het overgangseffect instellen door ' ondoorzichtigheid ”, de duur ervan als “ 2s ”, en de waarde van ondoorzichtigheid als “ 0 ” in de div-klasse die we in de CSS hebben gemaakt:
overgang : ondoorzichtigheid 2s ;ondoorzichtigheid : 0 ;
Opmerking: We passen de overgang toe op “ ondoorzichtigheid ” eigenschap om de transparantie van het element in te stellen. Hier zullen we de waarde ervan specificeren als ' 0 ”, wat betekent dat wanneer de overgang begint, de div twee seconden wordt verborgen.
Na het instellen van de overgangswaarden gebruiken we “ invoer ' om toegang te krijgen tot het invoertype dat in het HTML-bestand is gemaakt en de pseudo-klasse van het invoerelement in te stellen als ' :gecontroleerd ”. Vervolgens zullen we toegang krijgen tot de gemaakte div en de ' + ” wordt gebruikt om het selectievakje te koppelen aan de div. Dus wanneer een bewerking op het selectievakje wordt uitgevoerd, heeft het gebruik ervan invloed op de div. Vervolgens zullen we de dekkingswaarde instellen als ' 1 ”:
invoer : gecontroleerd + div {ondoorzichtigheid : 1
}
Opmerking: We zullen de dekkingswaarde specificeren als ' 1 ”, wat betekent dat wanneer het selectievakje is gemarkeerd, de gemaakte div wordt weergegeven. Schakel het bovendien uit om de div . te verbergen
Zoals u kunt zien, wordt de div getoond en verborgen met behulp van de ' overgang ” eigendom en “ :gecontroleerd ” pseudo-klasse-element:
We hebben de methode uitgelegd om een div met een transitie-eigenschap in CSS te verbergen en weer te geven.
Conclusie
Om een div weer te geven en te verbergen, wordt de “ overgang ” eigendom en “ :gecontroleerd ” pseudo-class element wordt op zo’n manier gebruikt dat de waarde van div opaciteit is ingesteld als “ 0 ”, en in :aangevinkt pseudo-klasse-element, stel de dekking in als “ 1 ”. Wanneer de gebruiker op het selectievakje klikt, wordt de div weergegeven en wanneer deze wordt uitgeschakeld, wordt de div verborgen. In deze handleiding hebben we de methode beschreven om div te verbergen en weer te geven met behulp van de eigenschap transition.