“overgang”Er en CSS -egenskap som definerer den enkleste metoden for å kontrollere hastigheten på animasjon når CSS -verdien endres fra en verdi til en annen. Overgangen kan implementeres på CSS “vise”Eiendom. Displayegenskapen brukes til å kontrollere et elements utforming, inkludert flytoppsett, rutenett, flex og mange flere.

Dette innlegget vil undersøke hvordan du bruker overganger ved hjelp av CSS Display -egenskapen.

Hvordan bruke overganger på CSS “Display” -egenskaper?

Brukere kan ikke bruke overganger direkte på CSS “vise”Eiendom. Imidlertid er det en alternativ måte å anvende overganger på displayegenskapen. For dette formålet, gå gjennom den under-nevnte prosedyren.

Trinn 1: Lag en "" beholder

Først må du lage en DIV -beholder ved hjelp av “”Tag sammen med den tildelte klassen med en spesifikk verdi.

Trinn 2: Legg til en overskrift

Deretter setter du inn en overskrift ved å bruke ethvert "

" til "

”Tagger. For eksempel, "

”Legger til en overskrift.

Trinn 3: Legg til data i listen

For å sette inn dataene i form av en liste, bruk "

" stikkord:

Liste over kjæledyr

Høne

And

Hund

Katt

Kanin

Utgangen fra den ovennevnte koden er som følger:

Gå nå videre mot CSS -delen for å style listen.

Trinn 4: Stil “.Pet-dyr ”element

Få tilgang til “”Element ved hjelp av den tildelte klassen”.Pet-dyr”Og bruk de listede egenskapene:

.Pet-dyr
Grense: 2px prikket RGB (230, 15, 15);
Margin: 50px;
bakgrunnsfarge: RGB (252, 239, 169);

Her:

• “grense”Eiendom brukes til å spesifisere grensen rundt elementet.
• “margin”Definerer rommet rundt elementgrensen.
• “bakgrunnsfarge”Tildeler en farge på baksiden av elementet.

Det resulterende bildet viser utdataene fra ovennevnte kode:

Trinn 5: Stil lagt til liste “Li”

Få tilgang til listen over "div”Container som har klasse”Pet-dyr" ved hjelp av ".Pet-dyr> li”Og bruk de under-nevnte egenskapene:

.Pet-dyr> li
Synlighet: skjult;
Opacitet: 0.2;
Overgang: synlighet 0s, opacitet 0.5s lineær;

Her:

• “synlighet”CSS brukes til å stille synligheten til elementet uten å endre utformingen av et dokument, for eksempel skjult eller synlig.
• “Opacitet”Angir åpenheten til et element.
• “overgang”Lar brukere endre eiendomsverdier jevnt over en gitt varighet:

Trinn 6: Bruk “Hover” pseudoklasse

Nå, bruk “sveve”Eiendom på listen:

.Pet-Animal: Hover> Li
synlighet: synlig;
Opacitet: 1;

“:sveve”CSS er en pseudoklasse som gjør endringer på kjøretid når musepekeren flyttes over elementet. Gjøre en liste synlig ved hjelp av “synlighet”Og sett åpenheten ved å bruke“Opacitet”CSS -egenskaper til listen på Hover:

Det kan observeres at vi har brukt overgang på "vise”Eiendom.

Konklusjon

CSS -overgangen kan ikke brukes direkte på "vise”Eiendom. Imidlertid kan det brukes på en alternativ måte. For å gjøre det, legg til listekoden på HTML -dokumentet, får tilgang til listen med tagnavn og bruk "overgang”,“Opacitet”, Og“synlighet”CSS -egenskaper på listen. Bruk deretter “: sveve”Pseudoklasse og angi synlighetsverdien som“synlig”. Dette innlegget har forklart hvordan overgangen brukes på CSS Display -egenskapen.