CSS-i üleminekud on selgitatud

Lihtsaim (ja kõige otsesem) viis oma komponentide animeerimiseks on CSS Transitions. Selles artiklis saate teada, kuidas CSS-i üleminekud toimivad ja kuidas sellega animatsioone teha.

Üleminek toimub siis, kui CSS-i atribuut muutub teatud aja jooksul ühest väärtusest teise.

CSS-i üleminekuid saate luua transitionatribuudiga:

.selector { transition: property duration transition-timing-function delay; }

transitionVara on lühem neljast CSS omadused, transition-property, transition-duration, transition-timing-function, transition-delay.

.selector { transition-property: property; transition-duration: duration; transition-timing-function: timing-function; transition-delay: delay /* The transition property is the shorthand for the above four properties */ transition: property duration timing-function delay; }

transition-propertyviitab CSS-i atribuudile, mida soovite üle viia. See on nõutav transitionstenogrammis.

transition-durationviitab ülemineku kestusele. Kui kaua soovite, et üleminek kestaks? See väärtus kirjutatakse sekunditega koos ssufiksiga (nagu 3s). See on nõutav ka transitionstenogrammis.

transition-timing-functionviitab sellele, kuidas toimub üleminek. Selle kohta saate hiljem teada.

transition-delayviitab sellele, kui kaua soovite enne kestuse alustamist oodata. See väärtus kirjutatakse sekunditega koos ssufiksiga (nagu 3s). transition-delayon transitionstenogrammis valikuline .

Käivitavad üleminekud

CSS-i üleminekuid saab käivitada otse pseudoklassidega nagu :hover(aktiveerub, kui hiir läheb üle elemendi), :focus(aktiveerub, kui kasutaja liigub elemendile või kui kasutaja klõpsab sisendelemendil) või :active(aktiveeritakse, kui kasutaja klõpsab elemendil) ).

/* creating transitions directly in CSS */ .button { background-color: #33ae74; transition: background-color 0.5s ease-out; } .button:hover { background-color: #1ce; }

Klasside lisamise või eemaldamise abil saate käivitada CSS-i üleminekud ka JavaScripti kaudu.

/* CSS */ .button { background-color: #33ae74; transition: background-color 0.5s ease-out; } .button.is-active { color: #1ce; } // JavaScript const button = document.querySelector('.button') button.addEventListener('click', _ => button.classList.toggle('is-active'))

Ülemineku ajastamise funktsiooni mõistmine

transition-timing-functionReguleerib, kuidas üleminek toimub. Kõigi üleminekute väärtus on linearvaikimisi, mis tähendab, et atribuut muutub kuni ülemineku lõpuni ühtlaselt.

.selector { transition: transform 1s linear; /* OR */ transition-property: transform; transition-duration: 1s; transition-timing-function: linear; }

Asi on selles, et vähesed asjad liiguvad elus lineaarselt. Päris esemed nii ei liigu. Mõnikord kiirendame; mõnikord aeglustame. See transition-timing-functionvõimaldab teil seda kõike jäädvustada.

Kujutage ette, kuidas viskate tennisepalli lagedale väljale. Pall jätab su käe maksimaalse kiirusega. Liikumisel kaotab see energiat, aeglustub ja lõpuks seiskub. Seda nimetatakse ease-out. Selle jaoks on olemas ajafunktsioon.

.selector { transition-timing-function: ease-out; }

Kujutage nüüd ette, et olete autos. Praegu see ei liigu. Autot liigutades see kiireneb ja liigub oma tippkiiruse poole. Seda nimetatakse ease-in. Sellel on ka ajastusfunktsioon.

.selector { transition-timing-function: ease-in; }

Kuna teil on ease-inja ease-out, seal on ka ajanäitamisfunktsioon mis ühendab kaks koos, ease-in-out. (Ma soovitan ease-in-outoma üleminekutes mitte kasutada , kui teie üleminekud ei kesta kauem kui sekund. Midagi ei leevenda sekundi jooksul sisse ja välja. See tundub lihtsalt imelik.)

.selector { transition-timing-function: ease-in-out; }

Siia õppinud ajafunktsioonide demo leiate sellest pliiatsist:

Lõpuks, kui mõni ülaltoodud valik ei meeldi, saate selle abil luua oma ajafunktsiooni cubic-bezier.

Oma ajafunktsiooni loomine kuupbezieriga

Kuupbezier on neli väärtust, mis määravad teie üleminekuajastusfunktsiooni. See näeb välja selline:

.selector { transition-timing-function: cubic-bezier(x1, y1, x2, y2); }

Ärge muretsege x1, y1,, x2ja y2. Kunagi ise numbreid kirjutades ei loo kuup-bezier kõveraid (kui te juba ei tea, mida need tähendavad, ja muudate oma ajafunktsiooni täiuslikkuse nimel).

Kõverate loomisel võite tugineda nii Chrome'i kui ka Firefoxi usaldusväärsetele arendustööriistadele. Selle kasutamiseks lisage transition-timing-functionelemendisse a, seejärel avage devtoolid ja klõpsake ajastamisfunktsioonil.

Vaadake CodePenil Zell Liewi (@zellwk) pliiatsi CSS Transition Timing Functions funktsioone.

Animatsioonide jaoks oma bezier-kõverate loomine on tänase artikli jaoks välistatud. Kui olete huvitatud, leiate kuup-bezier-kõverate kohta lisateavet Stephen Greigi artiklist „CSS-i ajastamisfunktsioonide mõistmine“.

Kahe või enama omaduse üleminek

Kaks (või enam) CSS-i omadust saate üle viia, eraldades need oma transitionvõi transition-propertyatribuudis komaga .

Sama saate teha ka kestuse, ajastamisfunktsioonide ja viivitustega. Kui väärtused on samad, peate määrama ainult ühe neist.

.selector { transition: background-color 1s ease-out, color 1s ease-out; /* OR */ transition-property: background, color; transition-duration: 1s; transition-timing-function: ease-out; }

Teil võib tekkida kiusatus üle minna igale CSS-i atribuudile all. Ärge kunagi tehke seda. See on jõudlusele halb. Määrake alati vara, mida proovite üle viia.

/* DON'T EVER DO THIS */ .selector { transition-property: all; } /* ALWAYS DO THIS */ .selector { transition-property: background-color, color, transform; }

Üleminek sisse vs üleminek

Mõnikord soovite, et omadused läheksid sisse ja välja erinevalt. Soovite, et kestus, ajafunktsioon või viivitus oleksid erinevad.

Selleks kirjutate veel ühe transition-omaduste komplekti .

.button { background-color: #33ae74; transition: background-color 0.5s ease-out; } .button:hover { background-color: #1ce; transition-duration: 2s; }

When you write transition properties in the triggering (pseudo) class, the transition properties in the triggering class overwrites the original transition properties you’ve stated in the base class.

So, in the example above, when you hover on the button, the background color takes 2 seconds to change from #33ae74 to #1ce.

When you hover out from the button, the background color only takes 0.5s to change back to #1ce because the transition-duration of 2s no longer exists.

Wrapping up

CSS Transitions are the easiest way to perform animations. You can create transitions either with the transition shorthand or with transition- properties.

To create a transition, you overwrite a property in a class (or psuedo class), and you specify the property to transit in transition or transition-property.

Ärge unustage transition-timing-functionoma animatsiooni muuta, nii et teie animatsioon näeb välja tõelisem!

Kui teile see artikkel meeldis, meeldib teile õppida õppida JavaScripti - kursus, mis aitab teil JavaScripti abil ehitada reaalseid komponente nullist .

(Oh, muide, kui see artikkel teile meeldis, siis ma hindaksin seda, kui saaksite seda jagada.)

Algselt avaldatud aadressil zellwk.com.