CSS -oorgange
CSS-oorgange
CSS-oorgange laat jou toe om eiendomswaardes glad te verander oor 'n gegewe duur.
Beweeg oor die element hieronder om 'n CSS-oorgangseffek te sien:
In hierdie hoofstuk sal jy leer oor die volgende eienskappe:
transitiontransition-delaytransition-durationtransition-propertytransition-timing-function
Blaaierondersteuning vir oorgange
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.
| Property | |||||
|---|---|---|---|---|---|
| transition | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-delay | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-duration | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-property | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-timing-function | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
Hoe om CSS-oorgange te gebruik?
Om 'n oorgangseffek te skep, moet jy twee dinge spesifiseer:
- die CSS-eienskap waarby jy 'n effek wil voeg
- die duur van die effek
Let wel: As die tydsduur deel nie gespesifiseer is nie, sal die oorgang geen effek hê nie, want die verstekwaarde is 0.
Die volgende voorbeeld toon 'n 100px * 100px rooi <div>-element. Die <div>-element het ook 'n oorgangseffek vir die width-eienskap gespesifiseer, met 'n duur van 2 sekondes:
Voorbeeld
div
{
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
Die oorgangseffek sal begin wanneer die gespesifiseerde CSS-eienskap (breedte) waarde verander.
Laat ons nou 'n nuwe waarde vir die width-eienskap spesifiseer wanneer 'n gebruiker oor die <div>-element beweeg:
Voorbeeld
div:hover
{
width: 300px;
}
Let daarop dat wanneer die wyser uit die element beweeg, dit geleidelik na sy oorspronklike styl sal verander.
Verander verskeie eiendomswaardes
Die volgende voorbeeld voeg 'n oorgangseffek by vir beide die breedte- en hoogte-eienskap, met 'n duur van 2 sekondes vir die breedte en 4 sekondes vir die hoogte:
Voorbeeld
div
{
transition: width 2s, height 4s;
}
Spesifiseer die spoedkurwe van die oorgang
Die transition-timing-functioneiendom spesifiseer die spoedkurwe van die oorgangseffek.
Die oorgangstyd-funksie-eienskap kan die volgende waardes hê:
ease- spesifiseer 'n oorgangseffek met 'n stadige begin, dan vinnig, dan eindig stadig (dit is verstek)linear- spesifiseer 'n oorgangseffek met dieselfde spoed van begin tot eindeease-in- spesifiseer 'n oorgangseffek met 'n stadige beginease-out- spesifiseer 'n oorgangseffek met 'n stadige eindeease-in-out- spesifiseer 'n oorgangseffek met 'n stadige begin en eindecubic-bezier(n,n,n,n)- laat jou jou eie waardes in 'n kubieke bezier-funksie definieer
Die volgende voorbeeld toon sommige van die verskillende spoedkurwes wat gebruik kan word:
Voorbeeld
#div1 {transition-timing-function: linear;}
#div2
{transition-timing-function: ease;}
#div3 {transition-timing-function:
ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5
{transition-timing-function: ease-in-out;}
Vertraag die oorgangseffek
Die transition-delayeiendom spesifiseer 'n vertraging (in sekondes) vir die oorgangseffek.
Die volgende voorbeeld het 'n 1 sekonde vertraging voordat dit begin:
Voorbeeld
div {
transition-delay: 1s;
}
Oorgang + Transformasie
Die volgende voorbeeld voeg 'n oorgangseffek by die transformasie:
Voorbeeld
div {
transition:
width 2s, height 2s, transform 2s;
}
Meer oorgangsvoorbeelde
Die CSS-oorgangseienskappe kan een vir een gespesifiseer word, soos volg:
Voorbeeld
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
of deur die snelskrif-eienskap te gebruik transition:
Voorbeeld
div
{
transition: width 2s linear 1s;
}
CSS-oorgangeienskappe
Die volgende tabel lys al die CSS-oorgangseienskappe:
| Property | Description |
|---|---|
| transition | A shorthand property for setting the four transition properties into a single property |
| transition-delay | Specifies a delay (in seconds) for the transition effect |
| transition-duration | Specifies how many seconds or milliseconds a transition effect takes to complete |
| transition-property | Specifies the name of the CSS property the transition effect is for |
| transition-timing-function | Specifies the speed curve of the transition effect |